写个CSS样式不是重复就是重复？Sass预编译器来帮你！

AlkaidSTART
138 阅读3分钟

写个CSS样式，不是刮风就是下雨。每次总是一次又一次的重复相同的属性，使用Sass能够大幅提升开发效率和减小维护成本，也能在面试中体现我们的前端工程化思维

Sass的安装：

1.node 环境（Windows.Macos.Linux均可安装,最推荐！！！）

  • 1.如果你现在还没安装node，最好立马下载一个！（仅针对于Windows和Macos） (安装node)
  • 2.以vs code为例：在集成终端打开，输入命令node -v即可查看下载node的版本,如果可以看到版本号证明已经安装好了

vvv 1.png

  • 3.输入npm install -g sass即可安装Sass

2.Macos和Linux(需借助Homebrew包管理器)

  • 1.确保安装了Homebrew包管理器
  • 2.执行brew install sass/sass/sass即可安装sass

3.新建sass文件

本文主要研究scss基础语法，更多请参考(点击我)

  • 1.输入以scss为后缀的文件名
  • 2.输入一段符合scss语法的代码（比如下面这个）
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
  • 3.编译
  • 3.1.1 在Windows系统下你得先下载git bash(Git for Windows)才能编译，直接用powershell会... 3.png
  • 3.1.2.安装好选中.scss文件在集成终端打开,点击下面这个选择git bash即可

4.png

接下来执行 `sass 你命名的sass文件名字 想被编译成css文件的名字`

5.png

  • 3.1.3生成css文件

6.png

3.2.如果是Macos不用下git bash（系统自带），操作同Windows

sass基础语法

1.声明变量

在Sass中我们通过"$"来声明变量，然后在选择器中直接将属性值写成变量即可

$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

2.嵌套结构

我们可以直接使用和html层次结构相同的方式，比如以下：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }

 }

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

第一个代码块是sass语法，第二个代码块是css语法，可以看到sass语法更适合中国宝宝体质，可以直接复用html结构来写真是泰裤辣！

补充：&用于选择当前选择器的直接父选择器，比如：

nav{
  &:hover{
    display: block;
  }
  a{
    color: #fff;
    &:hover{
      color: #000;
    }
  }
}

第一个&指向的是nav，第二个&指向的是a标签

  1. 部分（部分是一个以下划线开头的sass文件 ，通过@use语法被其他sass文件导入，部分本身不参与生成css文件）
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// 2. 主文件（导入并使用）：
@use './temp'; // 导入部分文件
body {
  font: 100% temp.$font-stack; // 调用导入的变量，需加“模块名.”
  color: temp.$primary-color;
}

// 也可给模块起别名，简化调用
@use './temp' as t;
.header {
  color: t.$primary-color;
}

4. 模块（让一个独立的scss文件可以通过@use '文件地址'命令导入形成的独立模块）

比如在另外一个scss文件中你想导入上面的部分，你就可以用 @use 'XX.scss'的语句导入其他sass文件，这样你就能在当前的sass文件下用导入sass文件的变量

5.混合器（mixin）(用于封装一种重复使用的代码块)

  • 5.1无参数
封装：
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
使用：
.container {
  @include flex-center;
  height: 100vh;
  background-color: #f0f0f0;
}
  • 5.2有参数
封装：
@mixin theme($theme:blue){
  background-color: $theme;
}
使用：
.success{
  @include theme($theme:green);
}
.failure{
  @include theme($theme:red);
}

6. 运算符

  • 6.1算术运算符（+ - * / %）
  • 6.2比较运算符（== ！= > < >= <=）
  • 6.3逻辑运算符（and or not）
  • 6.4颜色运算符（+ -）（可对16进制和rgb颜色进行运算）
  • 6.5字符串运算符（+）
  • 6.6赋值运算符（== += -=）
  1. sass内置命令
  • 7.1条件判断（@if @else if @else）
  • 7.2循环（@for @each @while）
  • 7.3混合器/函数（@mixin @include @function @return）
  • 7.4样式导入/拓展（@import @extend @use）
  • 7.5媒体查询（@media @supports）

8.补充

  • 8.1继承（允许一个选择器继承另一个选择器的所有样式）
.message{
  color:red;
}
.success{
  @extend .message;
}

像这样success选择器就继承了message选择器的所有属性

  • 8.2math.div()函数

math.div()用于执行精确数学运算 ，语法是math.div(被除数，除数)，对于为何不用除法？比如font: 16px/1.5这样就会被解析为分隔符，因此就需要math.div()

  • 8.3calc（）动态函数

calc(表达式)为属性值，比如下面的代码

.box {
  width: calc(100% - 40px); 
  margin: 0 20px; background: #eee; padding: 10px;
}

总结

通过上面的讲解我相信你对Sass充满了浓厚的兴趣，快去使用Sass仿写一两个静态页面吧！向前端工程化迈步！

ps:第一次写文章，讲解可能也不是很全面和专业，望各位读者海涵，有什么技术上的问题麻烦各位指正
avatar
文章
阅读
粉丝