SCSS的简单入门

cp3_forever
787 阅读2分钟

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

前言

昨天讲了一篇less的简单入门，链接在此，今天趁热打铁，继续把scss也一起写了，方便对比，巩固印象。

介绍

scss和less一样，也是一个CSS预处理语言，通过预处理器把scss文件编译成css文件，提供了函数，变量，继承，嵌套等等方法，但是相对less来说，用法更强大，更灵活，学习成本相对less会难一点。

安装

  1. 全局安装

        npm install -g sass  // 也可以通过yarn安装 yarn global add sass

    然后你可以在命令行通过sass指令操作scss文件了

      sass index.scss:index.css // 把index.scss 编译成index.css
  sass --watch index.scss:index.css // 实时监听编译
  sass --watch index.scss:index.css --style=compressed --no-source-map  // 实时监听编译，并且压缩，无需生成source-map文件

    还有其它指令，大家可以看看这张图片

    image.png

  2. 可以结合webpack使用

    npm install webpack-cli webpack  sass-loader sass css-loader style-loader -D   // yarn安装 也行

    要注意webpack 和sass和node的版本 ，可能会有不兼容问题

        // 这是我安装的版本，如果有兼容问题可以参考这个
    "css-loader": "^5.2.6",
    "sass": "^1.34.1",
    "sass-loader": "8.0.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"

    然后在webpack.config.js的module添加rules

    module.exports = () => {
    // ...此处省略了其它配置
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            MiniCssExtractPlugin.loader,
            // 将 CSS 转化成 CommonJS 模块
            "css-loader",
            // 将 Sass 编译成 CSS
            "sass-loader"
          ]
        }
      ]
    }
}

    最后运行wepback打包或者编译就可以了

语法

变量

scss也支持变量，把反复使用的属性值用变量定义，后续则无需重复写该值，更改起来也方便。但和less不同的是，它是以$开头，less是以@, 如果需要在属性名里面使用这个变量，则需要用#{}，less则是@{}

$width: 50px;
$left: left;
div {
 width: $width;
 color: red;
 margin-#{$left}: 20px;
}
// 编译后
div {
  width: 50px;
  color: red;
  margin-left: 20px;
}

计算

scss也和less一样，可以在属性值使用算术运算符，加减乘都可以；

$baseWidth: 10px;
.div1 {
  width: $baseWidth * 2; 
  height: 50px + 50px;
  margin-left: 50px - 10px;
}
.div2 {
  width: $baseWidth * 3; 
}

//编译后
.div1 {
  width: 20px;
  height: 100px;
  margin-left: 40px;
}

.div2 {
  width: 30px;
}

嵌套

scss也和less一样支持嵌套，无需要编写重复大段前面的父元素，可读性好，和html结构相似
同时可以在子元素中使用&代表父元素的引用，比如下面的:hover

div {
  .header {
    color: blue;
  }
  .content {
    color: blue;
    .item {
      color: blue;
      &:hover {
        color: red;
      }
    }
  }
}
// 编译后
div .header {
  color: blue;
}
div .content {
  color: blue;
}
div .content .item {
  color: blue;
}
// 此处生成的hover的是item的
div .content .item:hover {
  color: red;
}

混合

如果你有大段的css代码需要复用，那么就可以使用混合来声明，在别的地方可以直接使用 关键字是@mixin, 使用的时候使用@include，支持传参，如下

// 定义
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
// 定义参数默认值 1px
@mixin borderStyle($width: 1px) {
   border: $width solid red;
}
div {
  @include center;  
  @include borderStyle(2px);  // 传参
}

// 编译后
div {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
  border: 2px solid red;
}

继承

scss可以让一个css选择器继承另一个css选择器的样式，关键字是@extend

.div1 {
  width: 50px;
  color: red;
}
.div2 {
  @extend .div1;
  background:blue;
}


// 编译后
// .div2 继承了.div1的样式
.div1, .div2 {
  width: 50px;
  color: red;
}
.div2 {
  background: blue;
}

引入

支持通过@import方式引入scss文件或者css文件

@import 'index.scss';

函数

sass可以自己自定义编写函数，通过@function定义，使用@return返回值，这个是less所没有的，less只支持内置函数

// 定义
@function px2rem($px, $base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}
// 使用
div {
  width: px2rem(50px);
}

// 编译后
div {
  width: 0.6666666667rem;
}

循环

相对less只能使用when实现循环，scss可以使用for, while, each等

// for 循环
// @for $i（循环变量i，以$开头） from 起始值 to 结束值  注意遍历不包含结束值
@for $i from 1 to 3 {
  .div-#{$i} {
    width: 10px * $i;
  }
}
// 编译后
.div-1 {
  width: 10px;
}

.div-2 {
  width: 20px;
}

// while 循环
$i: 1;
@while $i < 3 {
  .div-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;  // 注意$i 要加1
}

// 编译后
.div-1 {
  width: 10px;
}

.div-2 {
  width: 20px;
}

// each 循环  用法一
@each $color in blue,green, red {
  div {
   color: $color;
  }
}
// 编译后
div {
  color: blue;
}

div {
  color: green;
}

div {
  color: red;
}

// 对象形式 用法二
@each $i,$color in (1:blue,2:green, 3:red) {
  .div-#{$i} {
   color: $color;
  }
}
// 编译后
.div-1 {
  color: blue;
}

.div-2 {
  color: green;
}

.div-3 {
  color: red;
}

条件判断

可以使用条件判断，关键字是@if，@else if 和 @else

div {
  @if true {
    color: red;
  }
  @else {
    color: blue;
  }
}

// 编译后
div {
  color: red;
}

总结

以上就是我总结的scss简单入门，希望对你们有所帮助。感谢～

avatar
文章
阅读
粉丝