scss --- css的预处理器

Posted ZZZ --- jh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss --- css的预处理器相关的知识,希望对你有一定的参考价值。

scss(sass):

概念:scss是css预处理器, 世界上最成熟、最稳定、最强大的专业级CSS扩展语言, scss是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.,能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表.

其他css预处理器:sass(scss), less, Stylus, DT CSS, Switch CSS, Turbine, Switch CSS, CSS Cacheer

原理:Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能,让CSS编程变得异常强大. 当然浏览器是不认识Sass语法. 开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码.

安装:
sass基于Ruby语言开发而成,因此安装sass前需要安装Rub(安装网址:https://rubyinstaller.org/downloads/)
安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v
gem install sass
gem install compass

编译scss:

//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets

vscode 使用scss:

1.安装 easy sass
2.修改vscode的配置(以下代码直接复制替换源码),注意:使用编辑器打开文件夹,不然保持的时候会出现路径问题,因为配置文件里面使用的是相对路径

"easysass.compileAfterSave": true,
"easysass.formats": [ //nested:嵌套缩进的 css 代码。//expanded:没有缩进的、扩展的css代码。//compact:简洁格式的 css 代码。//compressed:压缩后的 css 代码
    {
        "format": "expanded",
        "extension": ".css"
    },
    {
        "format": "compressed",
        "extension": ".min.css"
    }
],
"easysass.targetDir": "./css" //路径

使用:

  1. 使用变量:
    $变量名 eg: $color: red;
    注意:如果变量定义在了{ }规则块内,就只能在这个块内使用

     // 在{}号外面定义的变量是全局变量$color:red;
     
     $color:red;  // 全局变量
     a{
     	$color:blue;   // 花括号内定义的是局部变量
     	color:$color;   // bulie
     }
     .bb{
     	color:$color;   //red;
     }
     
     $color:yellow !global;   // 变成全局变量
     
     $color:red !default; // 默认变量
     
     // 特殊变量 ( #{表达式/变量}; 进行字符串拼接 )
     $aa:top;
     #dd{
     	border-#{$aa}:1px solid red;
     }
    
  2. 嵌套css规则

<!--选择器嵌套: -->
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

<!-- 特殊的:(:hover  前面要加&) -->
article a {
  color: blue;
  &:hover { color: red }
}
  1. 循环

     @for $i from 1 to 9 { }   // 不包含9. 即1-8
     @for $i from 1 through 9 { }   // 包含9. 即1-9
    
  2. 分支

    @if $i%2 > 0 { } @else { }
    
  3. 混合

    @mixin 混合名字 来定义代码块

  4. 引用

    @include 混合名字

  5. 继承

    @import “文件” eg: @import “public.css”

  6. 综合

    $color: red;
    @import “public.scss”;
    @mixin border{ width:100px; }
    #box{ @include border; }

以上是关于scss --- css的预处理器的主要内容,如果未能解决你的问题,请参考以下文章

SCSS 简要教程(常用指令与方法)

SCSS--SCSS相关介绍

css预处理器-SASS

css预处理器

将 scss 转换为 css [关闭]

scss CSS片段