sass的多种用法

sass的多种用法

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

1、嵌套

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

---

2、变量的使用

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

注意变量是有做用域的，与js变量做用域相似。

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

---

3、混合器@mixin

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

好比清除浮动：

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

而后就能够在你的样式表中经过@include来使用这个混合器.

.box{
    @include clearfix;
}

一、混合器传参

当@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
    )
}

二、默认参数值

为了在@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);
}

---

4、选择器继承

选择器继承是说一个选择器能够继承为另外一个选择器定义的全部样式。这个经过@extend语法实现。

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

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

---

5、函数指令

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

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

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

---

6、控制指令

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

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

三、@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
}

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

五、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 以外的全部测试条件都被视为测试成功）。

---

7、导入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文件直接使用变量。

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

含义是：若是这个变量被声明赋值了，那就用它声明的值，不然就用这个默认值。

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

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

二、静默注释

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

---

8、数据类型

sass方法

一、空值null

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

二、布尔型

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

三、数字

数字在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

四、字符串

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

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

$name: 'Gajendar';

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

五、颜色

颜色函数

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

用的比较多的函数方法：

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

六、数组

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

数组方法：

七、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实现响应式排版