@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Once you have this, probably you want to be able to reuse it, instead of copy/paste it around each time you need it.
$font-family: Verdana;
$font-size: 10px;
$color-text: #555;
$color-text-active: #000;
$color-background: #fff;
$color-background-active: #dcdcdc;
$rounded-corner-radius: 5px;
These are independent pieces of code that will be certainly used together or not, depending on the application.
Well, it's true that the standard CSS support the @import out of the box but it comes with some caveats. One evident problem is that each @import is handled by loading the correspondent CSS file, and this process behaves differently depending on the browser. I don't want to go too much in detail here, but the way the browser loads the @import files can be different if you have only imports in your style block or if you have other styles of links before.
If CSS already supports @import, why do I need SASS for this?
@import 'mixins/_generic.scss';
@import 'app/_variables.scss';
@import 'app/_fonts.scss';
// views
@import 'app/views/_view1.scss';
@import 'app/views/_view2.scss';
@import 'app/views/_view3.scss';
Notice that all the file names I'm referencing here are prefixed with an _ (underscore). The reason for this is because SASS specification says that if a filename is prefixed with _ (underscore) then the compiler must not compile that file. This makes complete sense because we will never use, for instance, the variables.css file so, we don't need to compile it.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)