sass - 语法(1)
变量
在scss当中定义变量的语法如下
$变量名 : 变量值;
代码块外部定义的变量可以在全局范围内使用
在代码块内部定义的变量是局部变量
例如
.box {
$color:red;
a{
color:$color;
}
}
如果该变量的值需要嵌入到字符串当中 , 需要加#{ }
$side : left;
.box {
border-#{$side}-radius:5px;
}
默认变量
sass的默认变量一般用来设置默认值 , 然后根据需求来进行覆盖
例如
$a_padding : 20px !default;
$a_padding : 6px;
如果对默认变量的值进行了覆盖 , 那么实际输出的就是覆盖之后的值 , 否则输出的就是默认值
如果是在一个单文件当中 , 并没有必要这样做
默认变量在组件化开发的时候会非常有用
什么时候需要声明变量
- 该值至少重复出现了两次
- 该值至少可能会被更新一次
- 该值所有的表现都与变量有关
嵌套
使用嵌套的方式来编写css代码 , 可以使元素之间的层级关系更清晰 , 代码的可读性更强
选择器嵌套
div {
h1 {
color :red;
}
}
编译后的结果为
div h1 {
color : red;
}
前面如果加上 >可以作为父子选择器
在嵌套的代码块内 , 可以使用&引用父元素
比如
a {
&:hover{color:red;}
&:visited{color:gray;}
}
属性嵌套
有一些复合属性可以使用嵌套的方式来写
比如border
p {
border : {
color:red;
width:2px;
}
}
注意 : border的后面必须要加上冒号
注释
SCSS可以有两种风格的注释
一种是标准的css注释 /* */
编译会保留
另一种是单行注释 // , 编译过程不保留
Mixin
Mixin有点像C语言的宏定义 , 是可以重用的代码块
//使用@mixin命令,定义一个代码块
@mixin left {
float : left;
margin-left : 10px;
}
//使用@include调用这个mixin
.box {
@include left;
}
mixin的强大之处 , 在于可以去指定参数和缺省值
@mixin left($value:10px) {
float : left;
margin-left : $value;
}
.box {
@include left(20px);
}
如果引入的时候不传参数 , 则使用缺省值
实例 : 生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li {
@include rounded(top,left);
}
#footer {
@include rounded(top,left,5px);
}
颜色函数
颜色函数是基于某个颜色进行的色彩调整
利用这些函数 , 可以很方便完成界面上风格统一的色彩搭配
涉及色彩的部分 , 可以很方便修改 , 完成主题风格的切换
$base_color : chocolate;
@mixin size {
width:200px;
height:100px;
}
.div1 {
@include size;
background:{
color: darken($base_color, 10%);
}
}
.div2 {
@include size;
background:{
color: $base_color;
}
}
.div3 {
@include size;
background:{
color: lighten($base_color, 10%);
}
}
效果图
常用的颜色函数
darken,lighten- 调整亮度 , 变暗/变亮sturate,desaturate- 增加/减小 饱和度adjust-hue- 调整 色相grayscale- 灰度处理complement- 色彩反相
文件引入
使用@import 引入另一个样式文件 , 可以是scss文件 , 也可以是css文件
@import "path/filename.scss"
@import "path/base.css"
继承
SASS允许一个选择器 , 继承另一个选择器
.class1 {
border : 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size : 120%;
}
在编译过后 , 会生成
.class1, .class2 {
border : 1px solid #ddd;
}
.class2 {
font-size:120%;
}
相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率
流程控制
条件语句
使用@if和@else可以进行判断
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
循环语句
for循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each循环 , 类似于迭代器
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定义函数
使用@function可以自定义一个函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width : double(5px);
}
