SASS学习

最新推荐文章于 2024-05-20 13:07:09 发布

眼眸流转

最新推荐文章于 2024-05-20 13:07:09 发布

阅读量337

点赞数

分类专栏：前端学习文章标签： sass scss 前端UI框架

本文链接：https://blog.csdn.net/gyfghh/article/details/120570096

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

SASS学习

之前的ui使用less书写，但是到后面太过于复杂，所以打算换为sass

1、安装配置

在这里插入图片描述

"easysass.compileAfterSave": true,
"easysass.formats": [
    {
        "format": "expanded",
        "extension": ".css"
    },
    {
        "format": "compressed",
        "extension": ".min.css"
    }
],
"easysass.targetDir": "css/"

2、语法介绍

1、注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会
将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息

//  我是只会在scss文件出现的注释
/*
    我是会在css文件中出现的注释
*/
/*!
    我是的会在压缩文件中出现的注释
*/
*,
*:before,
*:after {
    box-sizing: inherit;
}

2、变量

变量是由作用域的，跨作用域需要使用!global

$color: #ff9400;
body{
    background-color: $color;
}

3、数据类型

为了严谨和不出现奇怪的问题，使用的时候尽量符合定义规范

数字，1, 2, 13, 10px（单位会和数字当成一个整体）
字符串，有引号字符串与无引号字符串，"foo", 'bar'
颜色，blue, #04a3f9, rgba(255,0,0,0.5), rgba(#04a3f9,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

判断数据类型的方式：type-of($value)

4、运算

4.1、数字运算符

- 纯数字：结果为数字
- 一方带单位：结果带单位
- 都带单位：结果带单位
- 纯数字：结果为数字
- 一方带单位：结果带单位
- 都带单位：结果带单位
- 纯数字：结果为数字
- 一方带单位：结果带单位
- 都带单位：编译报错！
/：不会四舍五入，精确到小数点后5位
- 纯数字：结果为数字
- 一方带单位：结果带单位
- 都带单位：结果带单位
%
- 值与"%"之间必须要有空格，否则会被看做字符串

4.2、关系运算符

4.3、相等运算符

前部分为不带引号数字时，对比的仅仅是数字部分；反之，忽略引号，要求字符一一对应

5、嵌套

div{
    span{
        color: #333;
    }
    a{
        color: blue;
    }
}

6、插值语法

$color: red;
$attr: border;
p.#{$color} {
  #{$attr}-color: $color;
}

7、默认值

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

8、@指令

8.1、@import

文件的拓展名是 .scss 或 .sass

@import "foo.scss";
@import "foo";

8.2、@extend

.red{
    color: red;
}
.bgblue{
    @extend .red;
    background-color: blue;
}

9、三目运算符

if(expression, value1, value2)

p {
    color: if(1 + 1 = 2, green, yellow);
}

10、if

p {
    @if 1 + 1 == 2 {
        color: red;
    }
}

// compile:
p {
  color: red;
}

p {
    @if 1 + 1 != 2 {
        color: red;
    } @else {
        color: blue;
    }
}

// compile:
p {
  color: blue;
}

$age: 19;

p {
    @if $age == 18 {
        color: red;
    } @else if $age == 19 {
        color: blue;
    } @else {
        color: green;
    }
}

// compile:
p {
  color: blue;
}

11、for

@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

// compile:
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@for $i from 1 to 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

// compile:
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

12、while

$i: 6;

@while $i>0 {
    .item-#{$i} {
        width: 2em * $i;
    }

    $i: $i - 2;
}

// compile:
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

13、each

$animals:puma,
sea-slug,
egret,
salamander;

@each $animal in $animals {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}

// compile:
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

$lists: 
    (puma, black, default),
    (sea-slug, blue, pointer),
    (egret, white, move);

@each $animal,
$color,
$cursor in $lists {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
    }
}

// compile:
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

$h:(h1: 2em, h2: 1.5em, h3: 1.2em);

@each $header,
$size in $h {
    #{$header} {
        font-size: $size;
    }
}

// compile:
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

14、混合

14.1、基础混合

@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }

    color: #ff0000;
}

p {
    @include large-text;
}

14.2、参数

位置传参

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp(300px);
}

变量传参

@mixin mp($width) {
    margin: $width;
}

body {
    @include mp($width: 300px);
}

默认值

@mixin mp($width: 500px) {
    margin: $width;
}

body {
    @include mp($width: 300px);
    // or
    @include mp(300px);
    @include mp();
}

不定参数

@mixin mar($value...) {
    margin: $value;
}

body {
    @include mar(1px,2px,3px,4px);
}

混合样式中导入内容

@mixin example {
    html {
        @content;
    }
}

@include example {
    background-color: red;

    .logo {
        width: 600px;
    }
}

// compile:
html {
  background-color: red;
}

html .logo {
  width: 600px;
}

15、函数指令

15.1、字符串函数

函数名和参数类型	函数作用
to-lower-case($string)	变为小写
to-upper-case($string)	变为大写
str-length($string)	返回$string的长度(汉字算一个)
str-insert($string, $insert, $index)	在 $s t r i n g 的$ index处插入$insert
str-slice($string, $start-at, $end-at）	截取 $s t r i n g 的$ start-at和$end-at之间的字符串

15.2、数字函数

函数名和参数类型	函数作用
percentage($number)	转换为百分比形式
round($number)	四舍五入为整数
ceil($number)	数值向上取整
floor($number)	数值向下取整
abs($number)	获取绝对值
min($number…)	获取最小值
max($number…)	获取最大值
random($number?:number)	不传入值：获得0-1的随机数；传入正整数n：获得0-n的随机整数（左开右闭）

15.3、数组函数

函数名和参数类型	函数作用
length($list)	获取数组长度
nth($list, n)	获取指定下标的元素

15.4、映射函数

函数名和参数类型	函数作用
map-get($map, $key)	获取 $m a p 中$ key对应的$value
map-merge($map1, $map2)	合并 $m a p 1 和$ map2，返回一个新$map
map-remove($map, $key)	从 $m a p 中删除$ key，返回一个新$map
map-keys($map)	返回 $m a p 所有的$ key
map-values($map)	返回 $m a p 所有的$ value
map-has-key($map, $key)	判断 $m a p 中是否存在$ key，返回对应的布尔值

15.5、颜色函数

函数名和参数类型	函数作用
rgb($red, $green, $blue)	返回一个16进制颜色值
rgba( $r e d,$ green, $b l u e,$ alpha)	返回一个rgba； $r e d,$ green和$blue可被当作一个整体以颜色单词、hsl、rgb或16进制形式传入
red($color)	从$color中获取其中红色值
green($color)	从$color中获取其中绿色值
blue($color)	从$color中获取其中蓝色值
mix( $c o l o r 1,$ color2,$weight?)	按照 $w e i g h t 比例，将$ color1和$color2混合为一个新颜色

alpha( $c o l o r) / o p a c i t y ($ color)	获取颜色透明度值
rgba( $c o l o r,$ alpha)	改变颜色的透明度
opacify($color, $a m o u n t) / f a d e - i n ($ color, $amount)	使颜色更不透明
transparentize($color, $a m o u n t) / f a d e - o u t ($ color, $amount)	使颜色更加透明

15.6、内省函数

函数名和参数类型	函数作用
type-of($value)	返回$value的类型
unit($number)	返回$number的单位
unitless($number)	判断$number是否带单位，返回对应的布尔值
comparable($number1, $number2)	判断 $n u m b e r 1 和$ number2是否可以做加、减和合并，返回对应的布尔值

16、自定义函数

@function f($params...) {
    @return nth($params, 2);
}
p {
    height: f(1px,2px);
}

// compiled:
p {
  height: 2px;
}

眼眸流转

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
SASS学习

SASS学习之前的ui使用less书写，但是到后面太过于复杂，所以打算换为sass1、安装配置"easysass.compileAfterSave": true,"easysass.formats": [ { "format": "expanded", "extension": ".css" }, { "format": "compressed", "extension": ".min.css" }
复制链接

扫一扫