Sass浅了解

Sass(Syntactically Awesome StyleSheets)是CSS的语言扩展。它添加了基本CSS中没有的功能，使项目的样式表更简化和更易维护。它还支持我们在变量中存储数据、嵌套CSS、使用mixin创建可重用样式、向样式中添加逻辑和循环等。
在Sass中，以$开头，后跟变量名，这样就声明了一个变量，可以往里面存储数据。后续调用也是以$+变量名的形式调用：

<style type='text/scss'>

  $text-color:red;
  
  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;
  }
</style>

对于大型项目，CSS文件会有许多行和规则，嵌套可以通过在各自的父元素中放置子样式规则来实现，这样可以使代码更有条理性和组织性：

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}
/*上面代码在Sass中可以写成下面的形式：*/
nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

CSS的新特性一出来，不会立马被所有浏览器完全采用和正常使用，这通常需要一段时间。随着新特性被添加到浏览器中，使用它们时可能需要写上供应商前缀，下面例子展示了box-shadow需要添加供应商前缀：

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

此时，如果要为所有有box-shadow的元素重新编写此规则，或者更改每个值以测试不同的效果，就需要输入大量内容。

Sass提供了mixin以方便我们创建可重用样式，它类似于CSS的函数。上面例子如何写成一个minxin？如下所示：

@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;
}

该定义以@mixin开头，后跟一个自定义名称。参数（上例中的$x、$y、$blur和$c）是可选的。现在，每当需要box-shadow规则时，只需调用mixin就可以代替输入所有供应商前缀。一行代码搞定！那么如何调用呢？使用@include指令就可以调用mixin了：

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

再看个例子：

<style type='text/scss'>
  @mixin border-radius($radius){
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
    -ms-border-radius:$radius;
    border-radius:$radius;
}

  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include border-radius(15px);
  }
</style>

<div id="awesome"></div>

Sass中的@if指令对于测试特定情况很有用，它的工作方式与JavaScript中的if语句类似。同样，@else if和@else也适用，它们能为样式添加逻辑：

<style type='text/scss'>
  @mixin make-bold($bool) {
    @if $bool == true {
      font-weight: bold;
    }
  }
  @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);
  }
</style>

<div id="box"></div>

Sass中使用@for可以创建循环，类似于JavaScript中的for循环，它可以在循环中添加样式。

@for有两种用法：“start through end”或“start to end”。主要区别在于，“start to end”不包括作为计数部分的结束编号，而“start through end”包括了作为计数部分的结束编号。

下面是“start to end”的例子（不包括结束编号）：

<style type='text/scss'>
  @for $j from 1 to 6 {
    .text-#{$j} {font-size:15px*$j;}
  }
</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>

上面例子中的 #{$j} 是将变量 j 与文本组合成字符串，#不能省略！上面例子将会使5个类名对应的字体变化（）。

“start through end”例子：（包括结束编号）：

<style type='text/scss'>
  @for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
</style>

当Sass文件转换为CSS时，上面例子的效果如下所示：

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

这种方法对于创建网格布局非常有用。上面例子会得到12个列宽度可作为CSS类使用。

Sass还提供@each指令循环遍历列表或映射中的每个项。每次迭代时，变量的当前值从列表或映射中指定：

<style type='text/scss'>
  /*例一：
  @each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}*/
  /*例二：*/
  @each $color in blue,black,red {
    .#{$color}-bg {background-color:$color;}/*注意这里并没有用到小括号的地方！*/
  }
</style>

映射（map）的语法略有不同。下面是一个示例：

<style type='text/scss'>
  $colors: (color1: blue, color2: red, color3: green);

  @each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}  
</style>

注意，需要$key变量来引用映射中的键，否则编译后的CSS将包含color1、color2…。以上两个代码示例都转换为以下CSS：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

@while指令是一个功能与JavaScript的while循环类似的选项。它创建CSS规则，直到满足条件。

定义一个变量$x并将其设置为1。接下来，当$x小于6时，使用@while指令创建网格系统。在设置字体的CSS规则后，$x将递增1以避免无限循环：

<style type='text/scss'>
  $i:1;
  @while $i<6 {
    .text-#{$i} {font-size:15px*$i;}
    $i:$i+1;
  }

</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>

使用partial可以将样式拆分为较小块。Sass中的partial是保存CSS代码段的单独文件，是供导入并在其他Sass文件中使用的。这是一种将类似代码分组到模块中以保持其有序的好方法。

partial以下划线 _+名称构建，下划线‘_’告诉Sass它是一小段CSS，而不是将其转换为CSS文件。

此外，Sass文件以.scss文件扩展名结尾。要将partials中的代码引入另一个Sass文件使用，则要使用@import指令。

例如，如果所有mixin都保存在名为“_mixins.scss”的partial中，当主文件“main.scs”需要使用它们时，在主文件中写上：

@import 'mixins'

就可以使用了。注意，import语句中不需要下划线和文件扩展名，Sass知道它就是一个partial。一旦将partial导入到文件中，所有变量、mixin和其他代码都可以使用。

使用extend可以将一组CSS样式扩展到另一个元素。例如，下面的第二个div的CSS样式为.info类，它有宽度、边框和外边距。现在需要给第一个div设置样式为.info-important，它具有与.info相同的基本属性，但还需要背景。这时使用@extend指令可以避免代码重复：

<style type='text/scss'>
  h3{
    text-align: center;
  }
  .info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }
  .info-important {
    @extend .info;
    background-color:magenta;
  }
</style>

<h3>Posts</h3>
<div class="info-important">
  <p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
</div>

<div class="info">
  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>
</div>

。。。

posted @ 2022-10-12 21:01 枭二熊阅读(50) 评论(0) 编辑收藏举报

梟二熊

Sass浅了解

公告