sass

What is workflow in Yeoman to work with Sass files?

by

What you are looking for is documented on: https://github.com/yeoman/grunt-usemin Simply wrap your css imports in a comment block similarly to the way it’s done with the javascript files <!– build:css styles/main.css –> <link rel=”stylesheet” href=”https://stackoverflow.com/questions/15617431/styles/base.css”> <link rel=”stylesheet” href=”styles/modules.css”> <link rel=”stylesheet” href=”styles/layout.css”> <!– endbuild –> make sure your generator is up to date and your grunt … Read more

Sass ampersand, select immmediate parent?

by

You can work around this today with a mixin like this one: @mixin if-direct-parent($parent-selector) { $current-sequences: &; $new-sequences: (); @each $sequence in $current-sequences { $current-selector: nth($sequence, -1); $prepended-selector: join($parent-selector, $current-selector); $new-sequence: set-nth($sequence, -1, $prepended-selector); $new-sequences: append($new-sequences, $new-sequence, comma); } @at-root #{$new-sequences} { @content; } } Since the & is essentially a list of lists, you … Read more

webpack sass-loader not generating a css file

by

You are using the style-loader, which, by default, embeds your CSS in Javascript and injects it at runtime. If you want real CSS files instead of CSS embedded in your Javascript, you should use the ExtractTextPlugin. A basic config would be: Add var ExtractTextPlugin = require(‘extract-text-webpack-plugin’); to the top of your Webpack config file. Add … Read more

Differences between SCSS and LESS

by

Both Sass and Less are CSS preprocessors. From keycdn.com A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS. So Sass and Less don’t change the functionality of CSS, as they are compiled into plain old CSS. What they do is make it easier to write and … Read more

Using FontAwesome with Sass

by

Ok, I got help with that and there were several issues with the paths that were the main problem. I’ll explain them here in case it helps someone in my position. The problem was: indeed, the font files were not loading The errors: mostly related to paths and how compass & sass behave with @import … Read more

@function v/s @mixin in Sass-lang. Which one to use?

by

Functions are useful specifically because they return values. Mixins are nothing like functions–they usually just provide valuable blocks of code. Usually, there are cases where you might have to use both. For example, if I wanted to create a long-shadow with SASS, I would call a function like so: @function makelongshadow($color) { $val: 0px 0px … Read more

How can I create SASS mixins for browser vendor prefixes?

by

I also wanted to abstract out vendor prefixes but didn’t have compass available to me. @mixin vendor-prefix($name, $value) { @each $vendor in (‘-webkit-‘, ‘-moz-‘, ‘-ms-‘, ‘-o-‘, ”) { #{$vendor}#{$name}: #{$value}; } } Sass: * { @include vendor-prefix(‘box-sizing’, ‘border-box’); } Renders: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } Also see: … Read more

Sass @import using leading underscore

by

No. If your file is _foo.scss, all of these imports have identical results as long as you don’t have any ambiguous filenames (barring any side effects that might exist): @import “foo”; @import “foo.scss”; @import “_foo”; @import “_foo.scss”; Files with the same name but different extension The only time an extension is necessary is if you … Read more

Sass – Manipulate inherited property?

by

Inheritance No. Sass doesn’t ‘know’ what selector to inherit the color from. It would have to know that strong is a descendant of body. That seems like a reasonable enough assumption for you and I since strong is not allowed outside of the body, but that sort of assumption cannot be made about most selectors. … Read more