css预处理器Sass

最新推荐文章于 2024-05-21 21:14:20 发布

大鸡腿123

最新推荐文章于 2024-05-21 21:14:20 发布

阅读量508

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yiersan__/article/details/107894797

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css预处理器

Sass

Sass

Sass的安装

可以使用npm安装，但就是有些慢，可以用淘宝镜像。
npm安装命令：

npm install -g sass

安装成功：输入sass --version

1.26.10 compiled with dart2js 2.8.4

具体npm安装教程什么的可以去网上找找。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性
scss是sass的新语法，我们创建.scss文件就可以了，因为scss更像我们编写的css代码。
在这里插入图片描述

变量

Sass的变量使用$声明，声明的变量就像const常量一样，可以把经常使用到的值用变量储存起来，只要改变变量的值就可以了。

$mycolor: red;
$myfont-size: 20px;

body{
    background-color: $mycolor;
    font-size: $myfont-size;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
.rounded {
　　　border-#{$side}-radius: 5px;
}

作用域

sass变量的作用域就是在变量声明的层级。

body{
    background-color: $mycolor;
    font-size: $myfont-size;
    $width:100%;//$width只能在body中使用
}
table{
    width:$width;
}

进行编译的话会报错：
在这里插入图片描述

!global

!global可以设置变量是在全局作用域的。

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

全局变量一般放在同一个文件。

Sass嵌套

属性

属性也是可以嵌套的：
但必须要在属性后面加:

$mycolor: red;
$myfont-size: 20px;
$mycolor:yellow;
body{
    background-color: $mycolor;
    font-size: $myfont-size;
    $width:100%;//$width只能在body中使用font: {
    font: {
        family: Helvetica, sans-serif;
        size: 18px;
        weight: bold;
    }
      
    text: {
        align: center;
        transform: lowercase;
        overflow: hidden;
    }
}

body {
  background-color: yellow;
  font-size: 20px;
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-transform: lowercase;
  text-overflow: hidden;
}

@import

@import用于导入其他文件：@import "test;"
不需要加后缀名
那么引入后的scss文件就会包含被引入文件的内容。

@mixin

@mixin混入，就是规定了可以在样式表中重复使用的样式。
比如我想让这个div的样式是红色，25px，加粗，蓝色边框。就可以使用混入把这些样式装起来。

@mixin div_style {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
    height: 150px;
}
div{
    @include div_style;//使用include把混入包含
    background-color: green;
    width: 150px;
}

div {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  height: 150px;
  background-color: green;
  width: 150px;
}

混入还可以传递参数：

@mixin div_style($height,$color) {
    color: $color;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
    height: $height;
}
div{
    @include div_style(150px,red);//使用include把混入包含
    background-color: green;
    width: 150px;
}

这样编译后的结果和上面是一样的。

使用默认值：

@mixin div_style($height:200px,$color) {
//如果include调用那里没有传入height的值，就会使用默认值
    color: $color;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
    height: $height;
}

可变参数：

@mixin div_style($box-shadow...,$color,$height:200px) {
    //如果include调用那里没有传入height的值，就会使用默认值
    //不知道box-shadow会传入几个参数，可以使用...
    color: $color;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
    height: $height;
    box-shadow: $box-shadow;
}

这种写法是不对的，如果使用可变参数，那么只能有这一个参数

@mixin div_style($box-shadow...){}//这样

@extend

和java一样，@extend用于一个选择器的样式从另一选择器继承。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

三个按钮只有背景颜色和字体颜色不一样。

Sass计算

在Sass中可以使用算式：

    width: $width+10px;
    height: (50px/2);

Sass伪类

Sass编译

接下来
我们用win+R打开命令行，进入我们scss文件存储的位置，输入

sass test.scss test.css

即把test.scss文件编译为test.css文件，当然编译后的文件名随意，也可以直接输入文件位置。
在这里插入图片描述
直接在我们的HTML文件中link css文件相对位置，就可以看到可以应用了。

我用的编辑器是vscode，里面有很多插件，我们下载Live Sass Compiler，在settings.json中配置：

"liveSassCompile.settings.formats": [{

    "format": "expanded",

    "extensionName": ".css",

    "savePath": "~/../css"  //编译后保存的路径

    }
],
"liveSassCompile.settings.generateMap": false,//不编译出map文件