elementUI中用到哪些sass语法

2020-05-11 本文已影响0人 videring

说明：以下基于elementUI@2.13.1。
sass用法建议参考https://www.sass.hk/docs/
在elementUI中常用到的sass语法罗列如下。

导入文件：@import和分音（Partials）

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。
分音: 如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。例如：在elementUI中packages/theme-chalk/src/button.scss引用_button.scss方式如下：
@import "mixins/button"; // 即packages/theme-chalk/src/mixins/_button.scss

!global和!default

// !global可以把局部变量转全局变量
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

//编译后
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

// 可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，
// 此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

//编译后
#main {
  content: "First content";
  new-content: "First time reference"; 
}

变量的声明和引用：$和#

$nav-color: #F90; // 变量声明方式1
nav {
  $width: 100px; // 变量声明方式2
  width: $width; // 变量引用
  color: $nav-color; // 变量引用
}

//编译后
nav {
  width: 100px;
  color: #F90;
}

$--font-size-base: 14px;
h3 {
  font-size: #{$--font-size-base + 2px};
}

// 编译后
h3 {
  font-size: 16px;
}

// 编译后
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
p.foo {
  border-color: blue; }

父选择器：&

article a {
  color: blue;
  &:hover { color: red }
}
// 编译后
article a { color: blue }
article a:hover { color: red }

跳出嵌套：@at-root

block {
    color: red;
    #{&}__element {
        color:blue;
    }
    #{&}--modifier {
        color: orange;
    }
}
// 编译后
.block {
  color: red;
}
.block .block__element {
    color: blue;
}
.block .block--modifier {
    color: orange;
}

对比：

.block {
    color: red;
    @at-root #{&}__element {
        color: blue;
    }
    @at-root #{&}--modifier {
        color:orange;
    }
}
// 编译后
.block {
   color: red;
}
.block__element {
   color: blue;
}
.block--modifier {
  color: orange;
}

混入：mixin、include和content

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
// 编译后
a {
  color: blue;
  background-color: red; 
}

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }
// 编译后
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
// 编译后
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
// 编译后
* html #logo {
  background-image: url(/logo.gif);
}

布尔表达式：@if

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
// 编译后
p {
  border: 1px solid; 
}

扩展和服用：@extend
例如，某两个class会共用一部分样式，可以这样设置：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 编译后
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

-在输出屏幕打印警告：@warn
通常配合@if一起使用，如elementUI中packages/theme-chalk/src/mixins/mixins.scss中：

@mixin res($key, $map: $--breakpoints) {
  // 循环断点Map，如果存在则返回
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}

遍历：@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 编译后
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

在限制的范围内重复输出格式：@for

@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
// 编译后
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

加减乘除：

p {
  width: 1in + 8pt;
  height: 1em + (2em * 3);
  color: #010203 + #040506;
  background-color: #010203 * 2;
  cursor: e + -resize;
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
}
// 编译后：
p {
  width: 1.111in;
  height: 7em;
  color: #050709;
  background-color: #020406;
  cursor: e-resize; 
  content: "Foo Bar";
  font-family: sans-serif;
  margin: 7px auto; }

p {
  font: 10px/8px;
  height: (500px/2);
}
// 编译后
p {
  font: 10px/8px;
  height: 250px;  }

内置函数：mix

表示 2 种颜色的混合，第三个参数表示 2 种颜色混合各自占的比例，以 mix($--color-white, $--color-primary, 10%) 为例，表示 $--color-white（白色）占比 10%，而 $--color-primary（主色）占比 90%。

$--color-primary: #409EFF;
$--color-white: #FFFFFF;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%);
// 等价于 #53a8ff

内置函数：rgba
css元素的rgba用法是rgba(red, green, blue, alpha)，但sass中rgba还可以这么用：

$--color-black: #000000;
rgba($--color-black, 0.06)

函数指令：@function

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

// 编译后
#sidebar {
  width: 240px; }

参考：
https://www.sass.hk/guide/
https://sass-lang.com/documentation/modules

elementUI中用到哪些sass语法

猜你喜欢

热点阅读