【Sass】经常使用知识点总结

时间  2019-11-25
标签 Sass 经常 使用 知识 总结 繁體版
原文   原文链接

如何编译Sass

全局安装css

npm install sass -g

编译html

watch 单一文件web

sass watch scss/app.scss css/app.css

watch 整个文件夹npm

sass watch scss:css

注意中间有个冒号！！！sass

Partials

你能够建立一些只包含不多的代码片断的partial Sass files，而后能够把它们 import 到其余 Sass文件中。这种方式能够很好地模块化你的 CSS, 便于之后维护。一个 partial Sass 文件命名一般如下划线开头，好比 _partial.scss.bash

这样命名的好处是：Sass 会知道这是一个 partial 文件，它须要被import到其余文件中，在编译时，不会单独编译它。app

例如：定义了如下 partial 文件，并在 app.scss 中引入。模块化

1544078570513

// app.scss
// IMPORT ALL SASS DIRECTORY FILES

@import '0-plugins/_plugins-dir';
@import '1-base/_base-dir';
@import '2-layouts/_layouts-dir';
@import '3-modules/_modules-dir'

在 import 文件时，并不须要包含文件的扩展名.scss不须要写。函数

当watch整个文件夹，在terminal敲入插件

sass --watch scss:css

会发现，Sass只编译了 app.scss

1544078660175

1544078703722

这是咱们想要的结果，不会编译其余多余的partial 文件。若是命名不是如下划线开始，全部文件都会编译了。就会变成这样：

另外，在 app.scss 中 import partial 文件时，能够不加下划线。

// IMPORT ALL SASS DIRECTORY FILES

@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'

编译是没有问题的。

关于如何组织Sass文件的结构

推荐的 是SMACSS，一本书《Scalabel and Modular Architectrue for CSS》，介绍了模块化CSS的一些规则和建议。

能够在线阅读和下载。

Variables

变量能够帮助咱们保存一些想要重复使用的信息，好比 colors, font stacks, padding的值等等。 Sass 使用 $ 来识别一个变量名.

colors

// _box.scss

// VARIABLES
$base-color: yellow;

.box {
    height: 100px;
    width: 100px;
    background-color: $base-color;
}

font stacks

//_base.scss

// VARIABLES

$font-stack-serif: Georgia, Times, serif;
$font-stack-sans-serif: Helvetica, Arial, sans-serif;

body {
    background: orangered;
    color: white;
}

h1 {
    font-family: $font-stack-serif;
}

h2, h3 {
    font-family: $font-stack-sans-serif;
}

全局变量

若是咱们在不一样的 scss 文件中都定义了本身的变量，会显得很乱，也不便于之后维护。

推荐的作法是，定义一个全局的_variables.scss文件，将全部的变量放在这里。

// GLOBAL VARIABLES

$brand-color:pink;
$base-color: yellow;
$base-font-color: white;

$font-stack-serif: Georgia, Times, serif;
$font-stack-sans-serif: Helvetica, Arial, sans-serif;

$font-size-base: 18px;

而后在 app.scss 的第一行引入它。

// app.scss
// IMPORT ALL SASS DIRECTORY FILES

@import 'variables';
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'

在其余文件中使用变量。

// _base.scss

body {
    background: $brand-color;
    color: $base-font-color;
    font-size: $font-size-base;
}

h1 {
    font-family: $font-stack-serif;
}

h2, h3 {
    font-family: $font-stack-sans-serif;
}

Mixins

mixin 是用来解决重复代码的，比较像没有返回值的函数，能够传入参数。

官网示范的一个用法是，解决CSS3属性的不一样vender prefies的问题。其实，任何你须要reuse的代码，均可以使用mixin。

在CSS3的一些属性中，有些属性因为不一样 vender prefixes的存在，变得很是冗长，例如 transform box-shadow border-radius 等等。

.box {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

rotate(30deg) 写了3遍。

使用 mixin 能够解决这个问题，由于 mixin 能够像函数同样传入参数。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

在Angular中，编译器会自动加上vender prefixes，因此在写scss时，能够不加这些prefixes。

全局mixin

再复杂一点：

// _box.scss

.box {
    height: 100px;
    width: 100px;
    display: inline-block;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    
    -webkit-box-shadow: 0 5px 10px #555;
    -moz-box-shadow: 0 5px 10px #555;
    box-shadow: 0 5px 10px #555;

    background: orangered;
    background: -webkit-linear-gradient(orangered, yellow);
    background: -o-linear-gradient(orangered, yellow);
    background: -moz-linear-gradient(orangered, yellow);
    background: linear-gradient(orangered, yellow);
}

为了保持各个module的清爽，新建一个文件_mixins.scss来设置全局的mixins。在 app.scss 中导入它。

// app.scss

@import 'variables';
@import 'mixins';
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'

定义mixin

// _mixins.scss

// GLOBAL MIXINS

@mixin box($radius, $shadowColor, $gradientColor1, $gradientColor2) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
    
    -webkit-box-shadow: 0 5px 10px $shadowColor;
    -moz-box-shadow: 0 5px 10px $shadowColor;
    box-shadow: 0 5px 10px $shadowColor;

    background: $gradientColor1;
    background: -webkit-linear-gradient($gradientColor1, $gradientColor2);
    background: -o-linear-gradient($gradientColor1, $gradientColor2);
    background: -moz-linear-gradient($gradientColor1, $gradientColor2);
    background: linear-gradient($gradientColor1, $gradientColor2);
}

在 _box.scss 中使用

// BOX

.box {
    height: 100px;
    width: 100px;
    display: inline-block;
    @include box(100%, #555, orangered, yellow);
}

这样能够传入不一样的参数来实现不一样的box啦。

#box2 {
    @include box(20px, #000, #639, #fc3);
}

#box3 {
    @include box(5px, #ddd, black, teal);
}

消除了不少重复性代码。

推荐的mixin插件

Bourbon

Bourbon is a lightweight Sass tool set

https://www.bourbon.io/

若是不知道怎么组织本身的mixin，能够参考它的写法。

例如 clearfix

@mixin clearfix {
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}

使用：

.element {
  @include clearfix;
}

Extend/Inheritance

Sass的这一特性依然是为了遵循Dry principle，减小重复代码。你可使用 @extend 来共享属性。

好比，咱们要建立一个message module，它有3个状态，success、warning和error。

// index.html
<body>
   <div class="message success"></div>
   <div class="message warning"></div>
   <div class="message error"></div>
</body>

咱们可使用嵌套，将样式定义成这样：

// _message.scss

.message {
  width: 100%;
  height: 50px;
  background: #000; 
  margin: 10px auto;
  &.success {
    background: green;
  } 
  &.warning {
    background: orange;
  } 
  &.error {
    background: red;
  } 
}

还可使用extend来共享属性。

%message {
  width: 100%;
  height: 50px;
  background: #000; 
  margin: 10px auto;
}

.success {
    @extend %message;
    background: green;
}

.warning {
    @extend %message;
    background: orange;
}

.error {
    @extend %message;
    background: red;
}

html中不须要再加message class，更加简洁。

<body>
   <div class="success"></div>
   <div class="warning"></div>
   <div class="error"></div>
</body>

Maps

Sass提供了能够保存键值对的Maps结构。

$map: (key1: value1, key2: value2, key3: value3);

例如，咱们在scss中会定义不少颜色值，通常使用变量就能够了。

$primary-color: #005DFF;
$accent-color: #FFF6BB;
$border-color: #ddd;

// other variables

body {
    background-color: $primary-color;
    color: $accenet-color;
}

当还定义了其余不少变量后，就显得十分杂乱。能够单独将全部颜色值封装成一个Maps结构，再使用map-get($map,$key)来获取值。

$colors: (
    primary: #005DFF,
    accent: #FFF6BB,
    border: #ddd
);

body {
    background-color: map-get($colors, primary);
    color: map-get($colors, accent);
}

Function

function是有返回值的，最后要加 @return

好比在上例中，为了获取颜色值，咱们会屡次使用map-get($map,$key) ，看起来代码很长，能够自定义一个获取颜色的function来reuse这段代码。

$colors: (
    primary: #005DFF,
    accent: #FFF6BB,
    border: #ddd
);

@function color($color-name) {
    @return map-get($colors, $color-name);
}

body {
    background-color: color(primary);
    color: color(accent);
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程