1.基础语法
(1).注释
//注释
/*
1.单行注释
+ //开头,后面书写注释
+ 会在编译的时候被忽略掉
+ 开发注释
2.多行注释
+ /**/
+ 在两个星号之间书写注释
+ 会在编译的时候被保留下来
+ 但是将来打包的时候,会被忽略掉
3.强力注释
+ /*! 注释内容 */
+ 在注释的开始写一个 感叹号(!)
+ 会在编译的时候保留下来
+ 将来打包的时候也会保留
*/
(2).变量
// 1.定义变量
$color:red;
$dir:left;
$dir2:right;
$type:box;
// 2.使用变量
h1{
color: $color;
}
// 3.在样式名或者选择器上面使用
h2{
margin-#{$dir2}: 10px;
}
##{box}{
color: blue;
}
(3).if分支语句
$className:price;
// 1.if语句
h3{
@if $className == 'price'{
color: red;
}
}
h4{
@if $className == 'price'{
color: red;
} @else {
color: skyblue;
}
}
(4).sass循环
// css是从1开始数的
$list:(red,green,blue,purple,pink);
/*
1.for循环的第一种
语法: @for 变量 from 开始数字 to 结束数字{}
=> 注意:包含开始数字,不包含结束数字
=> 在循环内部可以使用任何一种形式来使用变量
注意: 你想用数组里面的第几个
=> 不能直接像JS一样使用数组名称[索引]
*/
@for $i from 1 to 5 {
li:nth-child(#{ $i }){
color: red;
background-color: nth($list,$i);
}
}
/*
2.for循环的第二种
+ 语法:@for 变量 from 开始数字 through 结束数字
+ 根据数字来进行循环执行,包含开始数字,也包含结束数字
*/
// 包含开始也包含结束
@for $j from 1 to 3 {
ul>li:nth-child(#{$j}){
color: blue;
}
}
/*
3.each 循环
+ 使用 each 语法循环数组
+ 语法: @each 变量(数组里面的每一个) in 数组 {内容}
+ 会根据数组里面有多少个成员执行多少次
=> index() 函数
=> index(数组,每一项)
=> 返回对应这一项的索引
+大部分使用循环做
=> 背景图片的设置
=> 背景图定位
*/
@each $value,$index in $list {
$i:index($list,$value);
li:nth-child(#{$i}){
color: $value;
}
}
2.嵌套语法
(1).基本嵌套
/*
1.基本嵌套
+ 选择集的基本嵌套
+ 规则:在一个选择集李曼直接书写后代选择器
*/
.header{
width: 100px;
height: 200px;
p{
font-size: 12px;
}
i{
color: red;
}
buttom{
border: none;
}
}
(2).子代嵌套
/*
2.子代嵌套
+ 直接在你需要子代嵌套的位置
+ 书写子代选择器的 > 就可以了
*/
.body{
height: 100px;
width: 100px;
> p{
font-size: 16px;
}
> div{
width: 50px;
height: 50px;
> button{
background-color: skyblue;
}
}
}
(3).连接符选择器嵌套
/*
3.连接符选择器嵌套
+ sass 在选择器里面提供了一个符号叫做 &
+ 表示当前选择集的选择器
+ 连接符一般用来连接伪类和伪元素
*/
div{
color: red;
&:hover{
color: skyblue;
}
}
(4).群组选择器嵌套
/*
4.群组选择器嵌套
+ 一个嵌套多个
=> 在一个基础选择器里面嵌套一个群组选择器
+ 多个嵌套一个
+ 多个嵌套多个
*/
//一个嵌套多个
div {
width: 100px;
height: 100px;
.box1,>.box2,div .box3{
font-size: 20px;
}
}
//多个嵌套一个
.box1,.box2,.box3{
height: 100px;
p{
color: red;
}
}
//多个嵌套多个
.box1,.box2{
color: red;
.item1,.item2{
font-size: 20px;
}
}
(5).属性嵌套
/*
5.属性嵌套
+ 和选择器没有什么关系
+ 和属性名有关系
=> 前提:属性名中带有中划线(-)才可以嵌套
=> 例子:
1. background-color
2. margin-left
3. border-left-color
4. ....
5-1. 基本属性嵌套
+ 属性名:{
嵌套内容:值;
}
5-2. 带有值的嵌套
+ 属性名:值{
嵌套内容:值;
}
5-3. 多属性嵌套
+ 前提: 需要包含两个以上的中划线
+ 属性名:{
嵌套内容:{
嵌套内容:值;
}
}
*/
// 5-1. 基本属性嵌套
div{
margin: {
left: 10px;
right: 20px
};
}
// 5-2. 带有值得嵌套
h1{
margin:10px{
right: 0px;
}
}
// 5.3-多属性嵌套
h2{
border: {
top: {
color: red;
width: 5px
};
left: {
color: blue;
style: solid;
};
}
}
3.sass混合器语法
(1).基本定义一个混合器
// 1.基本定义一个混合器
// 将来你使用这一段混合器的时候
// 就是在使用 {} 内部的代码
@mixin trans {
-webkit-transition: all 1s 0s linear ;
-moz-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
@mixin box {
width: 100px;
height: 100px;
color: #bfa;
}
h1{
width: 100px;
@include trans;
@include box
}
h2{
@include trans
}
(2).定义一个带有参数的混合器
/*
2.定义一个带有参数的混合器
语法:@mixin trans(变量1,变量2,....){
使用的时候,直接使用变量
}
使用这个混合器
+ 在你需要使用这个混合器的位置
+ 书写: @include trans(参数1,参数2,...)
+ 注意:必须每一个参数都书写
*/
// 2.定义一个带有参数的混合器
@mixin trans($time) {
-webkit-transition: all $time 0s linear ;
-moz-transition: all $time 0s linear;
-o-transition: all $time 0s linear;
transition: all 1s $time linear;
}
h1{
@include trans(1s)
}
(3).带有参数默认值的混合器
/*
3.带有参数默认值的混合器
+ 你传递了参数使用你传递的,你没有传递使用默认值
+ JS: function fn(a=100,b=200){}
定义混合器的语法:
@mixin trans($time:1s,$beginTime:2s){
}
使用的时候
1.按照顺序传递参数,不传递的使用默认值
2.使用的时候,单独指定给哪一个形参赋值
=> @include trans($time:2s)
=> 只给 $time 这个变量赋值
=> 其他没有赋值的按照默认值进行设置
*/
@mixin trans($time:1s,$beginTime:2s) {
-webkit-transition: all $time $beginTime linear ;
-moz-transition: all $time $beginTime linear;
-o-transition: all $time $beginTime linear;
transition: all $time $beginTime linear;
}
h1{
@include trans(1s)
}
// 给指定某一个形参赋值
h2{
@include trans($beginTime:2s)
}
4.继承语法
(1).直接继承全部
/*
1.直接继承全部
+ 独有的单独修改
*/
.box1{
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
color: red;
}
.box2{
// 继承 .box1
@extend .box1;
color: skyblue;
}
5.导入语法
// 1.导入变量文件
@import './mixin.scss';
// 直接使用文件里的变量
h1{
color: $c1;
}