1-2.变量引用:
凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用。css生成时,变量会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。
只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变
1.安装sass插件:
npm install sass-loader --save-dev
npm install node-sass --save-dev
写法嵌套:
写法二:
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
1-3.嵌套属性
属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-style border-width border-color
border-style border-width border-color
写法:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
特性:属性和选择器嵌套是非常伟大的特性,因为它们不仅大大减少了你的编写量,而且通过视觉上的缩进使你编写的样式结构更加清晰,更易于阅读和开发。
混合器:
如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
混合器使用@mixin标识符定义,@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:
把需要用到这个样式的地方,写入这个class名(notice)
.notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
浏览器会编译成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
如果你只是为自己写一些混合器,这并没有什么大的用途,但是当你使用一个类似于Compass的库时,你会发现,这是提供样式的好方法,原因在于你可以选择是否使用这些样式。
1.混合器中不仅可以包含属性,也可以包含css规则,包含选择器和选择器中的属性,如下代码:
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
2.当一个包含css规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则。举个例子,看看下边的sass代码,这个例子中使用了no-bullets这个混合器:
ul.plain {
color: #444;
@include no-bullets;
}
3.sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终,上边的例子如下代码:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
学习官网地址如下:https://www.sass.hk/guide/