I’d recommend you go with this one: https://github.com/nathos/sass-textmate-bundle, if only for the amazing code completion – compatible with SASS/SCSS. Whenever in doubt about packages, and assuming you use the amazing Sublime Package Control, just use the packages list, type something (the result will be sorted by the number of installs), and usually the most popular … Read more
You’re generating files that don’t need to be generated. screen.scss -> screen.css base.scss -> base.css catalog.scss -> catalog.css The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information. What … Read more
You’re setting the color after it has already been used. Basically, what you’re trying to do is this: $color: red; .foo { background: $color; } $color: green; Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in … Read more
You can use rgba, i.e. $primary: rgba(20,20,20, .5); It works for hex values as well $primary: rgba(#4B00B5, .3); You can also set the opacity of colors based on a variable value. For example: $primary-color: #a61723; …. color: rgba($primary-color, .5); Demo
Just do npm update and then npm install gulp-sass –save-dev in your root folder, and then when you run you shouldn’t have any issues.
By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all @imported into one large file. Without a framework, Sass puts the cached templates in the .sass-cache directory. In Rails and … Read more
First of all, the @each function is not from Compass, but from Sass. To answer your question, this cannot be done with an each loop, but it is easy to convert this into a @for loop, which can do this: @for $i from 1 through length($refcolors) { $c: nth($refcolors, $i); // … do something fancy … Read more
Quick fix Change your sass version to use the tilde ~ and it should work. This is because it will prohibit updated minor versions from being used, and allow only patches. Example package.json line: “sass”: “~1.32.6” See https://nodesource.com/blog/semver-tilde-and-caret/ Future-compatible fix For those of you who want to refactor your use of /, you need to … Read more
Extends do not allow customization, but they produce very efficient CSS. %button background-color: lightgrey &:hover, &:active background-color: white a @extend %button button @extend %button Result: a, button { background-color: lightgrey; } a:hover, button:hover, a:active, button:active { background-color: white; } With mixins, you get duplicated CSS, but you can use arguments to modify the result for … Read more
As Kumar points out, this has been possible since Sass 3.3.0.rc.1 (Maptastic Maple). The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors. We can combine the @at-root directive along with interpolation #{} to arrive at the intended outcome. SASS … Read more