乐趣区

关于sass:Sass-使用

作者：

jiezi

在

sass应用

一、sass环境

1.sass简述

Sass是最早的Css预处理语言，采纳Ruby语言编写，Sass从第三代开始，放弃了缩进式格调，并且齐全向下兼容一般的Css代码，这一代的Sass也被称为Scss

2.sass特点

不能间接在页面中解析，须要应用ruby事后翻译成css文件
Sass性能更加弱小，领有流控语句等
齐全兼容 CSS3，在 CSS 语言根底上增加了扩大性能，比方变量、嵌套 (nesting)、混合 (mixin)

3.Sass & Scss

Sass和Scss平时都称之为Sass，是同一个货色。区别有两点：

文件后缀 (扩展名) 不同:
    Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；
书写形式 (语法) 不同:
  Sass 以严格的缩进式语法规定来书写，不带大括号和分号;
  Scss 的书写形式和 Css 语法十分相似（越来越受欢迎起因之一）。

4.解析Sass

办法一：应用第三方编译工具koala，官网：http://koala-app.com/
办法二：应用vscode插件：easysass，插件配置参考：https://marketplace.visualstu…

二、sass语法

1.变量

Sass 应用美元符号“$”来申明变量。
Sass的默认变量个别是用来设置默认值，而后依据需要来笼罩的，笼罩的形式也很简略，只须要在默认变量 之前 从新申明下变量即可。
default:升高变量的优先级（备胎）

代码中应用：

$fontSize:60px;
$bgColor:blue !default;   //全局变量
$bgColor:skyblue;

body {
    font-size: $fontSize;
    background-color: $bgColor;
    div{
        $bgColor:red;   //局部变量
        background-color: $bgColor;
    }
}

2.@import

Sass扩大了Css的@import规定，让它可能引入Scss和Sass 文件，合并并输入一个繁多的Css文件。
被导入的文件中所定义的变量或 mixins 都能够在主文件中应用。

应用：

// test.scss
$bgColor:skyblue;

// index.scss
@import "test";
body {
    background-color: $bgColor;
}

3.嵌套

a.选择器嵌套

选择器嵌套，默认是叠加后辈选择器

div {
    h3 {
        color: red;
    }
}
b.属性嵌套
div {
    border: {       // 留神body 前面有个英文冒号
        top:1px solid red;
        bottom:10px dotted blue;
    }
}
c.伪类嵌套
div {
    &:hover {
        background-color: red;
    }
    &::after{
        content: "after";
    }
}

4.代码复用

a.混合宏
我的项目中有几处小款式相似，能够应用变量来对立解决。须要重复使用大段的款式时，变量就无奈达到目标了。这个时候就须要混合宏来搞定。
@mixin 用来申明混合宏
@include 用来来调用申明好的混合宏。
毛病：混合宏对于复用反复的代码块很不便，但它会生成冗余的代码块，雷同代码块不能智能合并。比方在不同的中央调用一个雷同的混合宏时。

应用：

@mixin after{       // 不带参数
    content: "after";
    display: block;
    background-color: red;
}

@mixin circle($radius:50px,$bgColor:skyblue){   // 带参数
    width: $radius;
    height: $radius;
    border-radius: 50%;
    background-color: $bgColor;
}
div{
    @include circle(50px,red);
    &::after{
        @include after;
    }
}
b.继承
Sass通过关键词 @extend 来继承已存在的类款式块，实现代码的继承。（能够解决混合宏不能智能合并雷同代码的毛病）
.btn{
    border: solid 1px #ccc;
    background-color: white;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
}
.btn-primary{
    @extend .btn;
    background-color: #33b735;  // 重写背景色彩
    color: white;
}
.btn-warnning{
    @extend .btn;
    background-color: #da3e3e;
    color: white;
}
//===> css
/*
/* 
.btn, .btn-primary, .btn-warnning {
  border: solid 1px #ccc;
  background-color: white;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
}

c.占位符

Sass的占位符 %placeholder 申明的代码，如果不被 @extend 调用的话，不会产生任何代码。防止了代码冗余的产生。
%popover{ // 不会保留的css中，因为未继承
    background-color: #33b735;
}

.btn-primary{
    // @extend %popover; 
}

区别总结

占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在，不论调用不调用，基类的款式都将会编译到 Css 代码中。

区别图示比拟：

5.非凡变量类型

a.list
List类型的取值,语法nth(list, index),第一个参数示意要取谁的,也就是list类型的变量的名称,第二个示意索引

应用:

div {
    $div-padding: 1px 5px 10px 20px 30px 40px;
    padding: {
        top: nth($div-padding, 1);
        bottom: nth($div-padding, 4);
    }
}
b.map
Map类型取值,语法map-get(map, key),第一个参数示意要取谁的,也就是map类型的变量的名称,第二个参数示意要取的key。

应用：

div {
    $color-map: (r:red, g:green, b:blue);
    color: map-get($color-map, r);
}

6.sass运算

对sass中的数值进行计算，除法运算必须加括号，其它运算能够不加，然而倡议所有运算都加上括号

应用：

div {
    border: solid 1px + 3px - 1px red;
    padding-left: (1000px / 10);
    padding-top: 10px * 10;
}

7.sass分支与循环

a.if语句
@if 指令能够依据条件来解决款式块，条件为true返回一个款式块，false返回另外款式块。除了@if之外，还能够配合@else、@else if应用。

应用：

@mixin show($boolean: true){
    @if $boolean {
        display: block;
        visibility: visible;
    }@else{
        display: none;
        visibility: hidden;
    }
}

div {
    @include show(true);
}
b.for循环
  @for 循环有两种模式：
    @for $i from <start> through <end>    包含end这个数
    @for $i from <start> to <end>        不包含end这个数
循环内应用#{$i}调用以后次循环变量，循环内应用函数或mixin时，不须要包装#{}，间接应用 $i；

应用：


ul {
    width: 500px;
    border: solid 1px red;

    li {
        background-color: red;
        margin: 10px 0;

        @for $w from 1 through 10 {
            &:nth-child(#{$w}) {
                width: #{$w}0%;
            }
        }
    }
}
c.each循环list
@each 循环就是去遍历一个列表，而后从列表中取出对应的值。
@each $var in <list>, $var 是个变量名，<list>返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的款式块。

应用：

ul {
    width: 500px;
    border: solid 1px red;

    $author-list: tony tian kevin;

    @mixin user-imgs {
        @each $author in $author-list{
            .photo-#{$author}{
                background-image: url("/imgs/#{$author}.jpg");
            }
        }
    }
    .author{
        @include user-imgs;
    } 
}

编译后的css:

ul {
  width: 500px;
  border: solid 1px red;
}

ul .author .photo-tony {
  background-image: url("/imgs/tony.jpg");
}

ul .author .photo-tian {
  background-image: url("/imgs/tian.jpg");
}

ul .author .photo-kevin {
  background-image: url("/imgs/kevin.jpg");
}
d.while循环
@while 循环和 @for相似，前面的条件为 true 就会执行，并且会生成不同的款式块，直到表达式值为 false 时进行循环。

应用：

li {
        background-color: red;
        $types: 10;
        $type-width: 20px;
        
        @while $types > 0{
            &:nth-child(#{$types}) {
                width: $type-width * $types;
                $types: $types - 1;
            }
        }
    }

8.函数

Sass自备一系列的函数性能。还能够自定义函数。

可应用的函数：

字符串函数
unquote($string)：        删除字符串中的引号；
quote($string)：        给字符串增加引号；
To-upper-case()：        将字符串小写字母转换成大写字母；
To-lower-case()：        将字符串转换成小写字母。

数字函数
percentage($value)：        将一个不带单位的数转换成百分比值；
round($value)：            将数值四舍五入，转换成一个最靠近的整数；
ceil($value)：            将大于本人的小数转换成下一位整数；
floor($value)：            将一个数去除他的小数局部；
abs($value)：            返回一个数的绝对值；
min($numbers…)：        找出几个数值之间的最小值；
max($numbers…)：        找出几个数值之间的最大值；
random():                 获取随机数。

列表函数
length($list)：                         返回一个列表的长度值；
nth($list, $n)：                         返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])：             将两个列给连贯在一起，变成一个列表；
append($list1, $val, [$separator])：         将某个值放在列表的最初；
zip($lists…)：                         将几个列表联合成一个多维的列表；
index($list, $value)：                     返回一个值在列表中的地位值。

Introspection 函数
type-of($value)：                    返回一个值的类型；
unit($number)：                        返回一个值的单位；
unitless($number)：                    判断一个值是否带有单位；
comparable($number-1, $number-2)：    判断两个值是否能够做加、减和合并。
Opacity函数
alpha($color) /opacity($color)：        获取色彩透明度值；
rgba($color, $alpha)：                      扭转色彩的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使色彩更不通明；
transparentize($color, $amount) / fade-out($color, $amount)：使色彩更加通明。

Sass Maps的函数
map-get($map,$key)：依据给定的 key 值，返回 map 中相干的值。
map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-has-key($map,$key)：依据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
keywords($args)：返回一个函数的参数，这个参数能够动静的设置 key 和 value。

Miscellaneous函数（三元函数）
if($condition,$if-true,$if-false)：条件成立时，返回的值为 $if-true，否则返回值为$if-false。

RGB色彩函数
rgb($red,$green,$blue)：依据红、绿、蓝三个值创立一个色彩；
rgba($red,$green,$blue,$alpha)：依据红、绿、蓝和透明度值创立一个色彩；
red($color)：从一个色彩中获取其中红色值；
green($color)：从一个色彩中获取其中绿色值；
blue($color)：从一个色彩中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起

HSL函数
hsl($hue,$saturation,$lightness)：
通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创立一个色彩；
hsla($hue,$saturation,$lightness,$alpha)：
通过色相（hue）、饱和度(saturation)、亮度（lightness）和通明（alpha）的值创立一个色彩；
hue($color)：从一个色彩中获取色相（hue）值；
saturation($color)：从一个色彩中获取饱和度（saturation）值；
lightness($color)：从一个色彩中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过扭转一个色彩的色相值，创立一个新的色彩；
lighten($color,$amount)：通过扭转色彩的亮度值，让色彩变亮，创立一个新的色彩；
darken($color,$amount)：通过扭转色彩的亮度值，让色彩变暗，创立一个新的色彩；
saturate($color,$amount)：通过扭转色彩的饱和度值，让色彩更饱和，从而创立一个新的色彩
desaturate($color,$amount)：
通过扭转色彩的饱和度值，让色彩更少的饱和，从而创立出一个新的色彩；
grayscale($color)：将一个色彩变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过去，而透明度不变。

应用：

body{
    &::after{
        content: to-upper-case("haoyunlai");
        display: block;
        clear: both;
    }
}

9.正文

// 单行正文
/* 多行正文 */

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章