携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情
定义变量
在 sass 中可以定义一些后期统一使用修改的变量
语法:
定义变量: $名字: 值;
注意: 值得位置不需要引号包裹
你所定义得变量再编译得时候不会被解析得
只有当你使用得时候才会被解析出来
使用变量
1. 直接使用再值得位置
举例: float: 变量;
直接使用就可以, 注意带上 $
2. 再样式名或者选择器上面使用
插值表达式
举例: margin-left: 10px;
相当于把变量的值插入到另一个内容中间
把变量使用 井号(#)大括号({}) 包裹起来
使用变量得位置
将来一旦变量修改
每一个使用该变量位置都会进行修改
3. if 分支语句
可以根据条件来决定添加或者不添加这个样式
可以根据条件来决定添加样式得值
div {
font-size: 100px;
color: red;
margin: 10px 20px;
}
sass 循环
循环生成一些样式结构
1. for 循环得第一种
js: for (var i = 0; i < 10; i++) {}\
使用方法: @for 变量 from 开始数字 to 结束数字 {}
注意: 包含开始数字, 不包含结束数字
循环内部可以使用任何一种形式来使用变量
2. for 循环得第二种
使用方法: @for 变量 from 开始数字 through 结束数字
根据数字来进行循环执行, 包含开始数字, 也包含结束数字
\
3. each 语法循环
使用方法: @each 变量(数组里面得每一个) in 数组 { 内容 }
根据数组里面有多少个成员执行多少次
index() 函数,
index(数组, 每一项)
返回对应这一项得索引
大部分使用循环做
背景图片得设置
背景图定位
sass 嵌套语法
把你的 css 写的和 html 结构一模一样
1. 基本嵌套
选择集得基本嵌套
规则: 再一个选择集里面直接书写后代选择集
2. 子代嵌套
直接再你需要自带嵌套得位置
书写自带选择器得
3. 连接符选择器嵌套
sass 再选择器里面提供了一个符号叫做 &s
表示当前选择集得选择器
连接符一半用来连接伪类和伪元素
4. 群组选择器嵌套
一个嵌套多个
在一个基础选择器里面嵌套一个群组选择器
5. 属性嵌套
和选择器没有什么关系只与属性名有关系
前提: 属性名中带有中划线(-) 才可以嵌套
5-1. 基本属性嵌套
+ 属性名: {
嵌套内容: 值;
}
5-2. 带有值得嵌套
+ 属性名: 值 {
嵌套内容: 值;
}
5-3. 多属性嵌套
+ 前提: 需要包含两个以上得中划线
+ 属性名: {
嵌套内容: {
嵌套内容: 值
}
}
sass 混合器语法
叫做混合器, 实际上是定义一个函数
js: function 函数名() {}
sass: @mixin 混合器名字() {}
1.基础混合器得定义和使用
使用方法: @mixin trans {
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
注意: 定义好的混合器是不会被编译得
基本使用
在你需要这一段代码得位置
书写 @include 混合器名字;
2. 定义一个带有参数得混合器
使用方法: @mixin trans(变量 1, 变量 2, ...) {
使用得时候, 直接使用变量
}
你需要使用这个混合器得位置 使用这个混合器
书写: @include trans(参数 1, 参数 2, ...)
注意: 必须每一个参数都书写
h2 {
-webkit-transition: height 1s 0s linear;
-moz-transition: height 1s 0s linear;
-ms-transition: height 1s 0s linear;
-o-transition: height 1s 0s linear;
transition: height 1s 0s linear;
}
3. 带有参数默认值得混合器
你传递了参数使用你传递得, 你没有传递使用默认值
+JS: function fn(a=100, b=200) {}\
定义混合器得语法:
@mixin trans($p: all, $t: 1s, $d: 0s, $tf: linear) {\
内容
}
使用得时候
1. 按照顺序传递参数, 不传递的使用默认值
2. 使用得时候, 单独指定给哪一个形参赋值
@include trans($tf: ease-in);
只给 $tf 这个变量赋值
其他没有赋值得按照默认值进行设置
h3 {
-webkit-transition: all 10s 0s ease-in;
-moz-transition: all 10s 0s ease-in;
-ms-transition: all 10s 0s ease-in;
-o-transition: all 10s 0s ease-in;
transition: all 10s 0s ease-in;
}
