sass的多种用法

sass的多种用法

主要归纳总结sass的常见用法，作为个人笔记使用，部分知识点并不仔细讲解。具体可参考文档：sass官网

一、嵌套

.svg{
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;

    path{
    	transition: all 500ms ease;
    }
}

注意嵌套中常用的&符号。

除了选择器的嵌套，还有属性的嵌套：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

---

二、变量的使用

sass使用$符号来标识变量。

注意变量是有作用域的，与js变量作用域类似。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

---

三、混合器@mixin

可以通过sass的混合器实现大段样式的重用。(例如固定的样式：清楚浮动，文字超出使用省略号等，或者是网站统一的按钮样式等。)

比如清除浮动：

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

然后就可以在你的样式表中通过@include来使用这个混合器.

.box{
    @include clearfix;
}

1、混合器传参

当@include混合器时，参数其实就是可以赋值给css属性值的变量。

@mixin multi-text($width, $row) {
    max-width: $width;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

p{
    @include multi-text(350px,2);
}

当使用@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可。

p{
    @include multi-text(
        $width:350px,
        $row:2
    )
}

2、默认参数值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。

@mixin btn($width:100px,$height:36px){
    width: $width;
    height: $height;
    line-height: $height;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
}
button-1{
    @include btn;
}
button-2{
    @include btn(120px,40px);
}

---

四、选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"

---

五、函数指令

@function getBg($name){
    @return '../../../../images/' + $name;
}

.box{
    background-image:url(getBg('bg.png'));
}

与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。

---

六、控制指令

1、@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

2、@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

常用于相同元素不同的(背景)图片：

.item{
    @for $i from 1 through 7 {
        >div:nth-child(#{$i}) {
            .item {
                background-image: url('../../../images/us/service-#{$i}.png');
            }
            @if $i == 7 {
                margin: 0 auto;
            }
        }
    }
}

插值语句#{}

通过 #{} 插值语句可以在选择器或属性名中使用变量。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

//编译为：
p.foo {
  border-color: blue;
}

3、@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

（1）简单循环

@each $animal in puma, sea-slug {
  .#{$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');
}

（2）复杂循环

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move){
	// $animal => (puma, black, default)
    // $color => (sea-slug, blue, pointer)
    // $cursor => (egret, white, move)
}

另一种写法：（ 一一对应）

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em){
    // $header => h1,h2,h3
    // $size => 2em,1.5em,1.2em
}

4、@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @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;
}

5、if()

if() 是 Sass 的一个内建函数，与之相似的 @if 则是一个内建指令。if() 用来做条件判断并返回特定值.

@mixin test($condition) {
    $color: if($condition, blue, red);
    color:$color
}

.firstClass {
    @include test(true);
}
.secondClass {
    @include test(false);
}

//编译结果
.firstClass {
    color: blue;
}
.secondClass {
    color: red;
}

在上例中，if() 函数内的三个参数分别代表：测试条件，测试成功返回值，测试失败返回值（除了 false 和 null 之外的所有测试条件都被视为测试成功）。

---

七、导入sass文件

sass也有一个@import规则，sass的@import规则在生成css文件时就把相关文件导入进来。

（开发过程中通常将比较常用的sass按照功能单独放在某个文件中，在使用的时候导入）

官方文档是这样说的：

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

@import '../../part/variable';

.light{
    color:$base-color;
}

这里就是在_variable.scss文件中定义了网站主题色—变量$base-color，导入之后就可以在当前scss文件直接使用变量。

1、默认变量值：!default标签

含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。

2、静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

---

八、数据类型

sass方法

1、空值null

尽管null表示什么都没有，但当使用length(..)还是会返回length为1。这是因为null仍然表示的是一个真实存在的实体。

2、布尔型

这个数据类型只有两个值：true和false。在Sass中，只有自身是false和null才会返回false，其他一切都将返回true

3、数字

数字在CSS中使用很广泛，大部分都是结合CSS的单位一起使用，但在技术上而言它依然算是数字。只要操作数字和兼容的单位，这样都是有效的。

$size: 18;                  // A number
$px-unit: $size * 1px;      // A pixel measurement
$px-string: $size + px;     // A string
$px-number: $px-unit / 1px; // A number

4、字符串

在Sass中，使用单引号('')或双引号("")包裹的都是字符串，就是他们包裹的是一个空格，那也是字符串.

如果你想在一个字符串是使用一个变量，而你又不想让这个变量直接变成了字符串，那就得使用到一个被称为变量插值，简单点说，就是使用#{}来包裹这个变量。

$name: 'Gajendar';

$author: 'Author : $name'; // 'Author : $name'
$author: 'Author : #{$name}';

5、颜色

颜色函数

Sass主要是给你提供一些额外的功能，这样你就可以更有效的使用颜色。

用的比较多的函数方法：

rgba($red, $green, $blue, $alpha) : Creates a Color from red, green, blue, and alpha values.

6、数组

用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

数组方法：

7、maps

相当于 JavaScript 的 object，(key1: value1, key2: value2)

Sass中的Map其实就是类似于关联数组，常常以key/value对键值出现。Map必须用括号(())括起来，每对键值之间使用逗号分隔。在Map中，一个给定的key只能有一个相关的value，但一个给定的value可以被映射到许多不同的key上。另外，在Map中映射给key的值value可以是任何数据类型，包括Map.

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

Map方法：

map-get($map, $key) : Returns the value in a map associated with a given key.

map-merge($map1, $map2) : Merges two maps together into a new map.

map-remove($map, $keys…) : Returns a new map with keys removed.

map-keys($map) : Returns a list of all keys in a map.

map-values($map) : Returns a list of all values in a map.

map-has-key($map, $key) : Returns whether a map has a value associated with a given key.

keywords($args) : Returns the keywords passed to a function that takes variable arguments.

---

几篇不错的sass技巧文章

• 使用SassMap实现响应式排版