scss学习笔记

2019 / 06 / 22

前言

一直以来,我使用scss都是使用它的嵌套语法和声明变量,偶尔用用mixin,会感觉scss如此简单,知道有一天我拿到的设计规范是这样的

看到第一眼我是绝望的,上边的颜色变化可不是透明度的变化,是真的色值的变化。如果知道hsl模式,会发现同一个色相的色值明度降低,使用hsl模式加scss的函数很容易简化这个问题。但事实上设计师用的是hsb模式,转化成hsl模式并不能帮的上什么忙。

所以我必须借助scss的高级功能了。scss其实对处理复杂的样式提供了非常多的语法和功能,可以把他理解为一门独立的语言,它提供了完善的数据类型,代码组织,语法控制和基本的内置函数,让开发者可以像编写其他的编程语言一样写样式,甚至函数式或者面向对象。

scss和sass是两种不同的语法,前者更适合大多数的web开发者,所以下面的代码都是基于scss。

基本功能

scss最基础的能力还是变量,嵌套nesting和混合mixin,这三个功能可以大幅度减少样式的代码量,尤其是通过nesting结构化样式和通过mixin解决通用代码块。

nesting通常会用到 & 符号来方便字符串拼接,这个符号叫做引用父选择符。可以获得父选择器的名称,很简单用就不做解释了。

mixin会用到 @mixin 这个内置函数,通过声明通用代码块来抽象一些通用的代码。然后在的地方就可以通过 @include 来引入代码块了。

数据类型

基本类型

scss的变量声明需要以$开头,类似于php的变量声明,

scss有6中基本的数据类型

1. 数值 1, 1.2, 1em, 1px, 1vw等等,数值是可以带单位的

2. 字符串,'hello' 加不加引号都行,scss会把不认识的值都认为是字符串

3. 颜色,#fff rgb(255, 255, 255),颜色在js里是一种十六进制的数值,但在scss里很特别,需要额外对待,他的运算方法很特殊。

4. 布尔 true false

5. 空 null

6. 值列表 比如$botton-padding: 10px 30px; 值列表可以认为是个数组

scss中的数据类型是和编程里的数据类型完全不同的,比如下边的代码就相当于把值列表和颜色拼起来,可以发现scss的基本远离还是拼接字符串,数据类型只是对数据进行分类处理而已。

$sky-shadow-color: rgba(46,158,255,0.3);
$middle-shadow-size: 0px 6px 24px 0px;
.sky-shadow {
box-shadow: $middle-shadow-size $sky-shadow-color;
}

对象

除了基本类型之外,还可以声明箭值对,比如下边就是一个箭值对构成的值列表,通过箭值对来描述颜色集合。当然也可以嵌套列表形成多维数组。

$main-colors: 
(name: 'sky', value: $sky, shadow: $sky-shadow-color )
(name: 'sea', value: $sea, shadow: $sea-shadow-color )
(name: 'violet', value: $violet, shadow: $violet-shadow-color );

一个复杂的DEMO

学习sass最好的方式是实现一个栅格系统,或者一个强大的按钮组件。可以运用到很多的sass知识点。

使用数组和对象可以很方便的便利并且生成通用性很强的代码。

@import 'variable';

@each $color in $main-colors {
$name: map-get($color, name);
$value: map-get($color, value);
$shadow: map-get($color, shaodw);

.ui-btn-#{$name} {
background-color: $value;

&.shadow {
box-shadow:0px 6px 24px 0px $shadow;
}

&.stroke {
border: 1px solid $value;
color: $value;
background-color: #fff;
}
}
}

会生成这样的代码,这样就能很方便的定义四种不同颜色的按钮的默认,阴影和描边这三种不同样式。

.ui-btn-violet { background-color: #8373FF; }
.ui-btn-violet.shadow { box-shadow: 0px 6px 24px 0px rgba(104, 85, 255, 0.3); }
.ui-btn-violet.stroke { border: 1px solid #8373FF; color: #8373FF; background-color: #fff; }

.ui-btn-red { background-color: #ff404a; }
.ui-btn-red.shadow { box-shadow: 0px 6px 24px 0px rgba(255, 65, 51, 0.3); }
.ui-btn-red.stroke { border: 1px solid #ff404a; color: #ff404a; background-color: #fff; }

.ui-btn-yellow { background-color: #ffd13e; }
.ui-btn-yellow.shadow { box-shadow: 0px 6px 24px 0px rgba(255, 145, 0, 0.3); }
.ui-btn-yellow.stroke { border: 1px solid #ffd13e; color: #ffd13e; background-color: #fff; }

.ui-btn-green { background-color: #5ed064; }
.ui-btn-green.shadow { box-shadow: 0px 6px 24px 0px rgba(72, 199, 89, 0.3); }
.ui-btn-green.stroke { border: 1px solid #5ed064; color: #5ed064; background-color: #fff; }

插值语法

类似于模版字符串,插值语法是scss中用来拼接字符串的方法,比如

background: #fff url('#{$asset-prefix}/h5/coupon/coupon-head-bg.png') no-repeat;

是不是看起来和${}这样的语法非常的相像。

插值语法通常也会用在选择器里,在值里通过 + 符号进行字符串拼接也可以。比如

.ui-btn-#{$name} { }

scss的内置指令

代码组织

@mixin, @include和@import都是scss中的内置指令,这三个可以认为是代码组织类的指令

条件和循环控制

除了这些之外还有条件和循环控制类的指令@each, @if, @while, @for,比如上面的代码使用@each对列表进行循环取值操作。

函数和面向对象

@function和@return可以用来定义scss的函数,scss的函数功能还是相对比较弱的,由于scss的数据类型非常简单,所以不能返回复杂的代码块或者样式块,只能返回一个基本的数据类型值。

scss和js的函数写法一摸一样,非常容易上手。

@function generate-shadow($size, $shadow){
@return $size $shadow
}

@extends可以用来继承一个选择器,使其可以在旧的选择器上的样式的基础上实现新的样式或者覆盖部分旧的样式。

代码调试

@debug和@warn,scss作为一门独立的“语言”,当然需要一些调试功能了。尤其是编译出错的时候,可以通过debug很快的知道原因发生在什么地方。

scss的内置函数

如果需要从箭值对里去一个值在scss里是需要通过内置函数来处理的,比如上面的代码用到的map-get,如果需要获得某个键的话,可以通过map-keys可以获取一个对象的字符串列表。map-values可以获取一个对象的值的列表。

map-get, map-keys, map-values是map对象操作类的函数,除了这些之外,scss还提供了一系列的其他的工具,主要包括七个类型。最有用的还是列表对象操作,map对象和颜色操作类。

  1. 数值运算类
  2. 字符串操作类
  3. 颜色操作类
  4. 列表对象操作类
  5. Map 对象操作类
  6. 选择符操作类
  7. 一般工具类

这些函数是全局可以使用的,可以参考 Sass 内建函数用法一览,这篇文章里写的非常详细。

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟