Sass浅了解

标签：box Sass color 了解 radius shadow border

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

。。。

标签：box,Sass,color,了解,radius,shadow,border
From： https://www.cnblogs.com/168-h/p/16785607.html

相关文章

赞助商

阅读排行