SASS的基本语法

最新推荐文章于 2023-02-28 18:50:18 发布

别来…无恙

最新推荐文章于 2023-02-28 18:50:18 发布

阅读量586

点赞数

文章标签： html5 css css3 sass html

本文链接：https://blog.csdn.net/qq_43942185/article/details/104527125

版权

了解 sass
sass是 css 的预编译语言，可以把文件编译成 css 文件。
sass可以定义变量、可以定义函数、可以有 if 语句可以有 for 循环语句，能使你敲代码的速度的变得更高更快更强。
.sass 文件和 .scss 文件的区别
+ 在 .scss 文件里面和写 css 的语法基本一致
+ 在 .sass 文件里面就没有大括号和分号, 全部依靠缩进来维持关系
+ 这两个文件被编译成 css 文件以后是一样的
sass的安装

sass 工具安装
使用 npm 进行安装一个全局工具
指令： npm install --global sass
简写: npm i -g sass
sass 工具检测
打开命令行输入： sass --version
sass 工具卸载
使用 npm 进行卸载
指令： npm uninstall --global sass
简写: npm un -g sass

sass 的变量
在 sass 里面定义一个变量，一次定义多次使用
语法: $名字: 值;
注意:你的变量名是 $名字，值不需要引号
使用: 直接使用变量名即可，只要变量的值修改了，那么所有使用这个变量的位置就都修改了

例：

  // 定义了三个叫做 $color、$fs、$border 的变量
$color: green;
$fs: 30px;
$border: 10px solid #333;

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

p {
  background-color: $color;
  font-size: $fs;
  border: $border;
}

a {
  color: $color;
  font-size: $fs;
}

效果：

div {
  width: 100px;
  height: 100px;
  color: green;
  font-size: 30px;
  border: 10px solid #333;
}

p {
  background-color: green;
  font-size: 30px;
  border: 10px solid #333;
}

a {
  color: green;
  font-size: 30px;
}

sass 的条件分支语句
其实就是

if 语句
if else 语句
if else if 语句

依赖于变量使用

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;
  }

}

效果：

div {
  width: 100px;
}

p {
  height: 200px;
  color: green;
}

h1 {
  width: 100px;
  height: 100px;
  color: skyblue;
}

sass 的循环语句

for 循环
依赖变量使用
语法: 有两种

        1.@for 变量 from 数字 to 数字 { 代码 }
          包含开始数字, 不包含结束数字
          在循环里面使用变量
          => 在选择器中使用 #{变量}
          => 在样式里面使用 变量  @for 变量 from 数字 through 数字 { 代码 }
         2. 包含结束数字
             在循环里面使用变量
             => 在选择器中使用 #{变量}
             => 在样式里面使用 变量

例：

/* for 循环 */
// 这个循环的数字变化是 1 2, 不包含 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;
  }
}

/* each 循环 */
$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;
  }
}

效果：

/* each 循环 */
li {
  width: 100px;
  height: 100px;
}

li:nth-child(1) {
  background-color: red;
}

li:nth-child(2) {
  background-color: green;
}

li:nth-child(3) {
  background-color: skyblue;
}

li:nth-child(4) {
  background-color: purple;
}

li:nth-child(5) {
  background-color: orange;
}

li:nth-child(6) {
  background-color: yellow;
}

sass选择器嵌套
sass的选择器嵌套和 html 一样让选择器也有一个上下级的关系

后代选择器嵌套
语法: 父级 { 子级 {} }
子代选择器嵌套
语法: 父级 { > 子级 {} }
连字符选择器嵌套
伪类选择器和伪元素选择器嵌套
当你需要的伪类和伪元素和选择器连接在一起的时候
使用 & 连接符操作
语法: 选择器 { &:hover {} }
群组选择器的嵌套(使用太少)
语法: 群组选择器 { 子级 {} }
语法: 选择器 { 群组选择器 {} }
语法: 群组选择器 { 群组选择器 {} }
例：

/* 1. 后代选择器嵌套 */
div {
  width: 100px;
  height: 100px;

  // div 后代的 p 标签
  p {
    width: 30px;
    height: 30px;

    // div 的后代 p 里面的后代 span
    span {
      color: red;

      // div 后代 p 的后代 span 的后代 a 标签
      a {
        font-size: 100px;
      }
    }
  }
}

/* 2. 子代选择器嵌套 */
div {
  width: 100px;
  height: 100px;

  // div 的子代 p 标签
  > p {
    width: 40px;
    height: 30px;

    > span {
      color: red;

      i {
        font-size: 0;
      }
    }

    a {
      font-size: 10px;
    }
  }

  ul {
    width: 20px;
  }

  > ol {
    height: 30px;
  }
}

/* 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;
  }
}


/* 4. 群组选择器嵌套 */
.box1, .box2, .box3 {
  width: 100px;
  height: 100px;

  p {
    width: 30px;
  }

}

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

  .box1, .box2, .box3 {
    color: red;
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;

  .list1, .list2 {
    color: red;
  }
}

效果：

/* 1. 后代选择器嵌套 */
div {
  width: 100px;
  height: 100px;
}
div p {
  width: 30px;
  height: 30px;
}
div p span {
  color: red;
}
div p span a {
  font-size: 100px;
  color: #000;
}

/* 2. 子代选择器嵌套 */
div {
  width: 100px;
  height: 100px;
}
div > p {
  width: 40px;
  height: 30px;
}
div > p > span {
  color: red;
}
div > p > span i {
  font-size: 0;
}
div > p a {
  font-size: 10px;
}
div ul {
  width: 20px;
}
div > ol {
  height: 30px;
}

/* 3. 连字符选择器嵌套 */
div {
  width: 100px;
  height: 100px;
}
div:hover {
  width: 200px;
}
div::before {
  content: "";
}

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

p {
  width: 100px;
}
p.active {
  width: 200px;
}

/* 4. 群组选择器嵌套 */
.box1, .box2, .box3 {
  width: 100px;
  height: 100px;
}
.box1 p, .box2 p, .box3 p {
  width: 30px;
}

div {
  width: 100px;
  height: 100px;
}
div .box1, div .box2, div .box3 {
  color: red;
}

.box1, .box2 {
  width: 100px;
  height: 100px;
}
.box1 .list1, .box1 .list2, .box2 .list1, .box2 .list2 {
  color: red;
}

sass的属性嵌套

前提: 可以嵌套的属性才能使用
就是属性中带有中划线的属性
=> border-left
=> margin-left
=> padding-left
=> background-color
=> background-image
语法: 以 padding 为例
padding: 10px; 上下左右
padding: 10px 10px; 上下左右
padding: 10px 10px 10px 10px; 上右下左
padding: 10px {
left: 5px;
};

例：

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;
  };
}

效果：

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  padding-left: 5px;
  margin-left: 3px;
  margin-right: 3px;
}

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

span {
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #333;
}

sass混合器
类似于 js 里面的函数
js 的函数 function 函数名(形参) {}

sass 的混合器
语法: @mixin 混合器名称 {}
语法: @mixin 混合器名称(形参) {}
语法: @mixin 混合器名称(形参默认值) {}
sass 的混合器的使用
语法: @include 混合器名称;
语法: @include 混合器名称(实参);

例：

/* 使用方式一 */
// 先准备一个混合器
//   不使用的时候是不会被编译的
@mixin transition {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

div {
  width: 100px;

  // 使用刚才定义好的混合器
  @include transition;
}

h1 {
  @include transition;
}

/* 使用方式二 */
//   在定义混合器的时候设置几个参数
//   由调用的时候传递的实参决定
@mixin transition($t, $p, $d, $tf) {
  -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(1s, all, 0s, linear);
}

p {
  @include transition(2s, height, 1s, linear);
}


/* 使用方式三 */
//   在定义混合器的时候可以传递一个参数默认值
//   如果传递了实参, 就用传递的
//   如果没有传递实参, 那么就是用默认值
@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); // 传递两个参数, 剩余的使用默认值
}

h4 {
  width: 100px;
  height: 100px;

  // 使用的时候, 指定给哪一个参数传递实参
  //   只是给 $d 这个形参传递实参, 别的都使用默认值
  @include transition($d: 1s);
}

效果：

/* 使用方式一 */
div {
  width: 100px;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

h1 {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

/* 使用方式二 */
div {
  width: 100px;
  height: 100px;
  -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;
}

p {
  -webkit-transition: height 2s 1s linear;
  -moz-transition: height 2s 1s linear;
  -ms-transition: height 2s 1s linear;
  -o-transition: height 2s 1s linear;
  transition: height 2s 1s linear;
}

/* 使用方式三 */
div {
  width: 100px;
  height: 100px;
  -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;
}

p {
  width: 100px;
  height: 100px;
  -webkit-transition: all 2s 0s linear;
  -moz-transition: all 2s 0s linear;
  -ms-transition: all 2s 0s linear;
  -o-transition: all 2s 0s linear;
  transition: all 2s 0s linear;
}

h1 {
  width: 100px;
  height: 100px;
  -webkit-transition: height 3s 0s linear;
  -moz-transition: height 3s 0s linear;
  -ms-transition: height 3s 0s linear;
  -o-transition: height 3s 0s linear;
  transition: height 3s 0s linear;
}

h4 {
  width: 100px;
  height: 100px;
  -webkit-transition: all 1s 1s linear;
  -moz-transition: all 1s 1s linear;
  -ms-transition: all 1s 1s linear;
  -o-transition: all 1s 1s linear;
  transition: all 1s 1s linear;
}

sass的继承
就是使用另一个规则集的样式
当你在写一个样式的时候你发现和之前写的一个规则集的样式一摸一样，就把刚才写的直接拿下来

语法:
@extend 另一个选择器
例：

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
}

p {
  // 继承了 div 里面的所有样式
  @extend div; // 各个同学用的都比较少

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

.list {
  // 直接继承 p 标签
  @extend p;

  margin: 10px;
}

#box {
  width: 200px;
  height: 200px;
}

h5 {
  @extend #box;
}

效果：

div, p, .list {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
}

p, .list {
  padding: 20px;
  border: 10px solid #333;
}

.list {
  margin: 10px;
}

#box, h5 {
  width: 200px;
  height: 200px;
}

sass的导入
就是把别的文件拿到我这里执行
平时开发的时候会写一个 base.css 的文件： * { margin: 0; padding: 0; } 这样的公共样式文件，这个公共样式文件每个 html 文件都会引入，如果我们在公共文件里面把所有需要用到的变量都定义好，那你再写每一个文件的时候只要导入这个 base.scss 就有了公共样式和这些变量了。

导入的语法: 语法: @import “你要导入的文件名称”;

还有一种使用方式

专门定义一个 variable.scss 的文件，这里专门就写所有的变量
专门定义一个 mixin.scss的文件，这里面专门就写所有的混合器
例：

// 导入 解释sass变量的那个文件
@import "./01_变量.scss";

h1 {
  color: $color;
}

效果：

div {
  width: 100px;
  height: 100px;
  color: green;
  font-size: 30px;
  border: 10px solid #333;
}

p {
  background-color: green;
  font-size: 30px;
  border: 10px solid #333;
}

a {
  color: green;
  font-size: 30px;
}

h1 {
  color: green;
}

家中逆战，无畏疫情，武汉加油，中国加油，人类必胜！！！

指导老师：郭翔

别来…无恙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
SASS的基本语法

了解 sasssass是 css 的预编译语言，可以把文件编译成 css 文件。sass可以定义变量、可以定义函数、可以有 if 语句可以有 for 循环语句，能使你敲代码的速度的变得更高更快更强。.sass 文件和 .scss 文件的区别+ 在 .scss 文件里面和写 css 的语法基本一致+ 在 .sass 文件里面就没有大括号和分号, 全部依靠缩进来维持关系+ 这两个...
复制链接

扫一扫