怎样写css更简单快捷 (css的预编译语言sass)

理解SASS

1.用来编译css的 使css代码编写 更加简洁方便
2.sass和css的区别

css文件的后缀名使.css
sass文件后缀名是.sass 或者 .scss
< sass文件和scss文件区别
1.scss文件语法和css文件基本一致
2.sass文件里面就没有大括号 和 分号 依靠缩进来维持关系
3.但是这两种文件编译后和css文件一样

3.sass全局工具
安装 npm i -g sass
卸载npm un -g sass

sass工具编译

1.sass单文件编译

切换到文件的目录下 打开命令行
输入指令：sass 要编译的文件 编译后的文件名
每次修改都要重新编译

2.sass单文件实时编译

指令：sass --watch 要编译的文件:编译后的文件名

3.sass文件夹实时编译

把一个文件夹里面的sass文件 全部编译到另一个文件夹里面
指令：sass --watch 要编译的文件夹:生成的文件夹

sass 基础语法

1.变量

语法：$名字:值
注意：变量名是 $名字 值不需要加引号
使用的时候直接写变量名

$color: green;
$fs: 30px;
$border: 10px solid #333;

div {
  width: 100px;
  height: 100px;
  color: $color;
  font-size: $fs;
  border: $border;
}

2.注释

单行注释 在编译的时候不进行编译
多行注释 在编译的时候会保留 但是在使用gulp打包的时候不会保留
强力注释 在编译的时候和使用gulp打包的时候都会保留

3.条件分支语句

if语句 语法 : @if 变量 == 值 { 样式 }
if else 语句 语法: @if 变量 == 值 {样式} @else { 样式}
if else if语句 语法：@if 变量 == 值 {样式} @else if 变量 ==值 { 样式 }

$type: c;

div {
  width: 100px;

  @if $type == a {
    color: red;
  }

}

p {
  height: 200px;

  @if $type == a {
    color: red;
  } @else {
    color: green;
  }

}

h1 {
  width: 100px;
  height: 100px;

  @if $type == a {
    color: red;
  } @else if $type == b {
    color: green;
  } @else if $type == c {
    color: skyblue;
  }

}

4.循环分支语句

依赖变量来用
语法：
- @for 变量 from 数字 to 数字 { 代码 }
包含开始数字 不包含结束数字
-@for 变量 from 数字 through 数字 { 代码 }
包含开始数字 也包含结束数字
each 循环
依赖一个sass数组使用
数组语法：变量: ( ),( ),( ),……
each 语法：@each 变量1,变量2,变量3,…… in 数组

$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);

li {
  width: 100px;
  height: 100px;
}

@each $index, $color in $colorArr {
  li:nth-child(#{$index}) {
    background-color: $color;
  }
}

// 不包含 3
@for $i from 1 to 3 {
  li:nth-child(#{$i}) {
    width: 10px*$i;
  }
}

// 数字变化是 1 2 3
@for $i from 1 through 3 {
  li:nth-child(#{$i}) {
    height: 10px*$i;
  }
}

5.选择器嵌套

后代选择器嵌套
语法：父级 { 子级 { } }
子代选择器嵌套
语法：父级 { >子级{ } }
连字符选择器嵌套
伪类选择器和为元素选择器的嵌套
使用 & 选择符操作
使用 & 连接符操作
语法：选择器 { $:hover { } }
群组选择器嵌套
语法：群组选择器 { 子级 { } }
语法：选择器 { 群组选择器 { } }
语法：选择器{ 群组选择器 { } }

/* 3. 连字符选择器嵌套 */
div {
  width: 100px;
  height: 100px;

  // 当鼠标悬停的时候 宽度改变
  &:hover {
    width: 200px;
  }

  &::before {
    content: '';
  }
}

li {
  &:nth-child(1) {
    width: 100px;
  }

  &:nth-child(2) {
    width: 300px;
  }
}

p {
  width: 100px;

  &.active {
    width: 200px;
  }
}

6.属性嵌套

只有属性带有中划线的才能使用属性嵌套
列入：padding-left 这种

div {
  width: 100px;
  height: 100px;

  padding: 10px {
    left: 5px
  };

  margin: {
    left: 3px;
    right: 3px;
  };
}

p {
  border: 10px solid #333 {
    left: 10px dashed pink;
  };
}

span {
  display: block;
  width: 0;
  height: 0;

  border: 10px solid transparent {
    bottom: 10px solid #333;
  };
}

7.混入

类似与js中的函数
sass的混合器
语法：@mixin 混合器名称 {}
语法：@mixin 混合器名称 ( 形参 ){}
语法：@mixin 混合器名称( 形参默认值 ){ }
sass的混合器
语法：@include 混合器名称
语法：@include 混合器名称

@mixin transition($t: 1s, $p: all, $d: 0s, $tf: linear) {
  -webkit-transition: $p $t $d $tf;
  -moz-transition: $p $t $d $tf;
  -ms-transition: $p $t $d $tf;
  -o-transition: $p $t $d $tf;
  transition: $p $t $d $tf;
}

div {
  width: 100px;
  height: 100px;

  // 使用这个带有参数默认值的混合器
  @include transition; // 不用传递参数, 所有的都用默认值
}

p {
  width: 100px;
  height: 100px;

  // 使用这个带有参数默认值的混合器
  @include transition(2s); // 只传递第一个参数
}

h1 {
  width: 100px;
  height: 100px;

  // 使用这个带有参数默认值的混合器
  @include transition(3s, height); // 传递两个参数, 剩余的使用默认值
}

8.继承

语法 @extend 选择器

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
}
p {
  // 继承了 div 里面的所有样式
  @extend div; // 各个同学用的都比较少

  padding: 20px;
  border: 10px solid #333;
}

9.导入

语法 ： @import 要导入的文件名

@import "./01_变量.scss";