我对SCSS的总结和理解

Zeekg
651 阅读3分钟

在平常在项目中写CSS的时候，只用原生的CSS来写，这的确看着是很让人无语。有着SCSS的帮助的确减轻了压力，最起码看着舒服了。

这里我也只总结下比较常用的一些用法。有些更加高阶的用法，可以在官网去查阅。（例子大部分来源于官网）

与less的区别

SCSS（.scss或.sass） 和 LESS（.less） 除了后缀名的不同。

还有运行环境的不同，Less是基于Javascript的，Sass是最初是基于Rudy，但现在不再维护了。现在的Dart Scss是基于dart，官方现在也是推荐的Dart Scss。

还有在Less中变量是用@开头的，Sass是用$开头的。

Scss 和 Sass 的不同

在早期是用Sass的，并且是使用缩进格式的来写CSS的，这种格式就用.sass作为后缀；

而scss就是用写CSS的格式来写的，并且语法完全兼容 CSS3，这种用.scss作为后缀。

基于 CSS 功能扩展

最明显的扩展就是可以以嵌套的形式来写CSS，例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

可以编译成：

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

而且有&作为父选择器，可以直接使用嵌套外层的父选择器

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为：

#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red; 
}

使用变量

在 Sass 中，变量以 $ 开头的，后跟变量名。

$main-fonts: Arial, sans-serif;
$headings-color: green;

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

用@mixin创建可以可重用CSS

在 @mixin 后添加名称与样式，然后用@include可以在其他地方使用。

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

而且是可以加参数的。

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

控制指令

虽说控制指令貌似并不经常用到，但还是以备不时之需。主要与混合指令 (mixin) 配合使用。

@if 和 @else

@mixin border-stroke($val) {
    @if $val==light {
      border: 1px solid black;
    }
    @else if $val==medium {
      border: 3px solid black;
    }
    @else if $val==heavy {
      border: 6px solid black;
    }
    @else {
      border: none;
    }
}

#box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
}

@for

可以有限的控制重复输出内容。

这里的#{}类似JavaScript中的模板字符串。

这里有两种写法：

  1. 开始 through 结束：这种包括结束符号。
  2. 开始 to 结束：这种不包括结束符号。
<style type='text/scss'>
    @for $i from 1 through 6 {
      .text-#{$i} { font-size: 15 * $i; }
    }
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

@each

和for类似，但这种直接遍历的值。

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

这段代码会被转为：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

@while

@while可以实现比@for更加复杂的操作。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译成：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

@import

@import允许其导入 SCSS 或 Sass 文件。

被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import "foo.scss";
// 或者
@import "foo";

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。导入语句中不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import "colors";

上面的例子，导入的其实是 _colors.scss 文件

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

@extend

@extend可以从一个元素中借用 CSS 规则并在另一个元素上重用它们。

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

写在最后

在项目中使用scss的话，经常依赖环境装不上，这的确挺坑爹的；需要使用老版本的SCSS才可以使用。但是Rudy Sass也不再维护，详见Ruby Sass不再维护

不止Rudy Sass，还有LibSass也不再维护，详细见 LibSass is Deprecated。

We no longer recommend LibSass for new Sass projects. Use Dart Sass instead.

我们不再推荐 LibSass 用于新的 Sass 项目。请改用Dart Sass。（谷歌翻译真香） 这是官方的原话

现在的Dart Sass已经挺好的了，现在官方推荐的也是Dart Sass。

另外，less和scss两个的功能都大同小异，在项目中使用那个随自己喜好就行。

链接：

若有不正确的地方，欢迎在评论区中指出

avatar
文章
阅读
粉丝