关于css:css预处理器

47次阅读

共计 3244 个字符，预计需要花费 9 分钟才能阅读完成。

Sass 是成熟、稳固、弱小的 CSS 预处理器，而 SCSS 是 2010 年 5 月的 Sass3 版本当中引入的新语法个性，种语法旨在通过引入 CSS 敌对语法来缩小 Sass 和 CSS 之间的差距。齐全兼容 CSS3 的同时继承了 Sass 弱小的动静性能。

sass 和 scss 的区别
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 语法书写形式不同，Sass 是以严格的缩进式语法规定来书写，不带大括号 ({}) 和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写形式十分相似。
```
// sass 语法：$font-stack: Helvetica, sans-serif  // 定义变量
$primary-color: #333 // 定义变量
body
  font: 100% $font-stack
  color: $primary-color

// scss 语法：$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
```
scss 变量

变量用来存储须要在 CSS 中复用的信息，例如色彩和字体。SASS 通过 $ 符号去申明一个变量。
```
$primary-color: #333;
body {color: $primary-color;}
```

scss 嵌套:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li { 
      display: inline-block;
      &>a { // 父选择器的标识符 &
        color: red
      }
    }
  }
}

@import 引入

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

在 scss 中引入 scss 文件时能够省略文件扩展名

函数：
- sass 自带函数 max, min, ceil, floor, 查看所有自带函数列表
- 自定义函数：
```
@function addWidth($width1,$width2){@return $width1+$width2;}
div{width:addWidth(100px,20px);
}
```
Mixin 混入

混合（Mixin）用来分组那些须要在页面中复用的 CSS 申明，开发人员能够通过向 Mixin 传递变量参数来让代码更加灵便，该个性在增加浏览器兼容性前缀的时候十分有用，SASS 目前应用 @mixin name 指令来进行混合操作。
```
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
```
能够通过在引入混合器时给混合器传参，来定制混合器生成的准确款式。这样形式跟 JavaScript 的 Function 很像：
```
@mixin link-colors ($normal, $hover, $visited) {
  color: $normal;
  &:hover {color: $hover ;}
  &:visited {color: $visited;}
}
a {@include link-colors(blue, red, green)
}
```

@extend 继承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

deep 深度作用选择器

<style lang="scss" scoped>
  .button-box{
    /deep/ .el-button{padding: 13px 50px;}
  }
</style>

根底运算:

// 加：+
.div1{width: 10px+10px;}
.div2{width: 10px+10;}

// 减：-
.div1{width: 10px-5px;}
.div2{width: 10px-5;}

// 乘：*
.div1{width: 10px*px; // 报错}
.div2 {width: 20px;}

除：/
.div1{
  // 不正确
  width: 10px/2;
}
.div2{
  // 不正确
  width: 10px/2px;
}
.div3{
  // 不正确
  width: (10px/2px);
}
.div4{
// 正确
  width: (10px/2);
}

插值语句

$height:10px;
$name:height;
.div-#{$name}{#{$name}: #{$height};
}

@if、@for、@each、@while

$type: monster;
p {
  @if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}

@mixin does-parent-exist {
  @if & {
    &:hover {color: red;}
  } @else {
    a {color: red;}
  }
}
// 如果没有父选择器，& 的值将是空，你能够在一个 mixin 中应用它来检测父抉择是否存在

@for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
}

// 等于
.item-1 {width: 2em;}

.item-2 {width: 4em;}

.item-3 {width: 6em;}

less 是一门 css 预处理它裁减了 CSS 语言，减少了诸如变量、混合（mixin）、函数等性能，让 CSS 更易保护、不便制作主题、裁减。Less 能够运行在 Node 或浏览器端。

嵌套：

.container {

h1 {
  font-size: 25px;
  color:#E45456;
}
p {
    font-size: 25px;
    color:#3C7949;
}
.myclass {
  h1 {
    font-size: 25px;
    color:#E45456;
  }
  p {
    font-size: 25px;
    color:#3C7949;
  }
}

}

变量：

// 在 less 中应用 @XXX 定义变量
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
@b: box
@rem: 64px;
#{@b}1 {
  width: @width*2;
  height: @width*@rem;
  background: red;
}
// 写在 {} 之间 叫做局部变量，只能够在 {} 之间起作用
.box {
  @width: 200px; 
  width: @width;
}

混入

// 不带参数，无默认值
.div1 {
  width:200px;
  height:200px;
  backgorund-color;red;
}
.div2 {
  border:1px solid red;
  .div1
}

// 带参数，无默认值
.div1(@w) {border:solid red @w;}
.div2 {
  widthz;200px;
  height:200px;
  .div2(30px);
}

// 带参数带默认值
.div1(@w:3px) {norder:solid red @w'}
.div2 {
  widthz;200px;
  height:200px;
  .div2(); // 不传参（然而得有小括号），默认就是 3px，传参就是新值}

// 混入中减少判断条件
.width(@weight) when (@weight > 200px)
{width：@weight;}
#box2 { // 无成果
    .width(200px);
}
#box3 {.width(300px);
}

正文完