主题简介:利用scss中的函数方法取代js的部分工作
色值颜色的介绍
HEX 常用在代码中表示颜色,HEX 的参数是通过十六进制表示法连接三个字节形成,顺序如下,字节 1:红色值(颜色类型红色),字节 2:绿色值(颜色类型为绿色),字节 3:蓝色值(颜色类型蓝色),一个字节表示 00 到 FF 范围内的数字。
RGB 色彩模式是工业界的一种颜色标准,红 (Red) 、绿 (Green) 、蓝 (Blue) 是色光三原色,三者本身就是一种色光。
- HSB或者HSV 包含是色相 (H)、饱和度 (S) 和明度 (B)
- HSL与HSB色彩模式非常相似,HSL即色相(Hue)、饱和度(Saturation)、亮度(Lightness),二者的饱和度是相同的,而在亮度上表现的方式不一样。
// 浏览器支持的形式为 hex rgb hsl
.box{
color:#ff0000;
color:rgb(255,0,0);
color:hsl(0,100%,50%);
}
scss 基础规范部分
scss 5条变量规则
- 变量以美元符号
$
开头,后面跟变量名 - 变量名是不以数字开头的可包含字母、数字、下划线、横线(连接符)
- 通过连接符
-
与下划线_
定义的同名变量为同一变量 - 变量一定要先定义,后使用
- 变量名和值之间用冒号
:
分隔
2种变量作用域
变量作用域分为「全局变量域」和「局部变量域」
- 全局变量:声明在最外层的变量,可在任何地方使用
- 局部变量:嵌套规则内定义的变量只能在嵌套规则内使用 , 将局部变量转换为全局变量可以添加
!global
声明
$color: red;
.container {
$height: 500px;
$font-size: 16px !global;
font-size: $font-size;
color: $color;
height: $height;
}
常规用法
@extend
实现样式复用
//@extend 继承的使用
a:hover {
text-decoration: underline;
}
.hoverlink {
@extend a:hover;
}
// 编译后为
a:hover, .hoverlink {
text-decoration: underline;
}
@mixin
实现更为强大的复用 ,
@mixin
语法糖可以简写成=
@include
语法糖可以简写成+
// @mixin的简单的使用
@mixin backgroundColor($color){
background-color:$color;
}
.box{
// @include 使用需要结合mixin
@include backgroundColor('#ff0000');
}
// 编译后结果
.box{
background-color:#ff0000;
}
@content
起到一个占位符的作用,与 Vue 中 slot 作为预留空间的作用一样
// @content 支持类似vue插槽slot的功能
@mixin box {
.title {
@content;
}
}
@include box {
.text {
font-size:14px;
}
}
//编译后结果
.title .text{
font-size:14px;
}
总结:静态的复用上@extend
更适合,灵活的扩展上 @mixin
更适合
@at-root
放弃当前嵌套功能
// 示例
.bar {
@at-root .foo {
color: red;
}
}
//编译后
.bar {}
.foo {
color: red;
}
scss判断处理,方法使用部分
function,if,each
部分区别于js
需要以@
开头
if else
判断部分
$width: 100;
$height: 200;
$last: false;
.div{
@if ($width>50 and $height<300) {} @else {}
@if (not $last){} @else{}
@if ($width>500 or $height<300) {} @else {}
}
@mixin backgroundColor($color,$important: false){
background-color:if($important, $color!important, $color);
}
for
循环部分
$class-slug: for !default;// 用于设置默认值
@for $i from 1 through 4 {
.#{$class-slug}-#{$i}{ width: 60px + $i; }
}// 编译后为 1 2 3
@for $i from 1 to 4 {
.#{$class-slug}-#{$i}{ width: 60px + $i; }
}// 编译后为 1 2 3 4
each
循环部分
//scss 定义常规的list
$list: adam john wynn;
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat; }
}
}
.author-bio { @include author-images; }
// 编译后css
.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; }
//scss 对义对象形式的list
$template1: (
color1: 'red',
color2: 'green',
);
$template2: (
color1: 'red',
color2: 'green',
);
$templates: (
template1: $template1,
template2: $template2,
);
@function convertThemes() {
$t: ();
@each $templateName, $template in $templates {
$t: map-merge($t, $template);
}
@return $t
}
while
循环判断部分
// scss 执行部分
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
// css编译后
.while-4 { width: 24px; }
.while-3 { width: 23px; }
.while-2 { width: 22px; }
.while-1 { width: 21px; }
内置模块
maps
的基础函数
// 引入map相关方法
@use "sass:map";
// 示例说明
$colorList:(
color1:red,
color2:blue,
color3:green,
)
@function getColor($list,$key){
@return map.get($list,$key); // 使用当前方式是依靠sass_map.scss实现的
@return map-get($list,$key); // 使用的当前方式是依靠sass_function.scss 实现的
// 下方文档关于用法区别不在单独描述
}
.div{
color:getColor($colorList,'color1')
}
map.get(key):根据给定的
key
值,返回map
中相关的值。map.merge(map2):将两个
map
合并成一个新的map
。map.remove(key):从
map
中删除一个key
,返回一个新map
。map.keys($map):返回
map
中所有的key
。map.values($map):返回
map
中所有的value
。-
map.has-key(key):根据给定的
key
值判断map
是否有对应的value
值,如果有返回true
,否则返回false
。更多
map
设置详细文档的请查看地址:https://sass-lang.com/documentation/modules/map
list
的基础函数
// 引入list相关方法
@use "sass:list";
// 示例说明
$colorList:10px 20px;
@function appList($width){
$colorList:list.append($colorList,$width)
}
appList(30px 40px)
// 输出 10px 20px 30px 40px
** list.append(val, [separator分隔符参数,当List只有一个值是,结果会用空格分开,否则用List本来的分隔符。
**list.index(value): **返回List中一个值的位置
**list.is-bracketed($list): **判断一个列表是否使用了方括号
list.join(list2, [bracketed]): 把风两个List合并为一个List
**list.length($list): **返回列表元素的个数。对于一个map数据,返回的是键值对的个数
list.separator($list): 返回一个列表的分隔符,如果列表的元素小于2个,则返回space
list. nth(n): 取得列表中指定位置的元素
**list. set-nth(n, list指定value
-
list. zip($lists…): 把多个List组合成一个多维List。返回结果的第n个值是把每个参数列表的第n个值拿来用逗号分隔组成其值。如果有一个列表参数此位置无值,则不组合。
更多
list
设置详细文档的请查看地址:https://sass-lang.com/documentation/modules/list
color
的基础函数
// 引入color相关方法
@use "sass:color";
// 示例说明
$colorDefault:#ff0000;
//color.adjust(#6b717f, $red: 15); // #7a717f
@function tranColor($col,$alpha){
color: rgba(color.red($col),color.green($col),color.blue($col),$alpha);
}
.div{
color:tranColor($colorDefault,0.5);
}
color.red($color) 用于获取颜色的红色通道。
color.green($color) 用于获得颜色的绿色通道
color.blue($color)用于获取颜色的蓝色通道。
color.hue($color)用于获得颜色的色调。
color.saturation($color)用于获得颜色的饱和度。
color.lightness($color)以获得颜色的亮度。
color.alpha($color)返回颜色的透明度
color.adjust(red: null, blue: null,
saturation: null, whiteness: null, alpha: null)$color
按固定量增加或减少 的一项或多项属性。-
color.change(red: null, blue: null,
saturation: null, whiteness: null, alpha: null) 将颜色的一个或多个属性设置为新值。// 示例: color.change(#6b717f, $red: 100); // #64717f
更多
color
设置详细文档的请查看地址:https://sass-lang.com/documentation/modules/color
math
的基础函数
// 引入math相关方法
@use "sass:math";
// 示例说明
math.ceil(4.2); // 4
math.ceil(4.9); // 5
- **math.ceil(number`到下一个最大的整数
- **math.floor(number`到下一个最小的整数
- math.max($number...) 返回一个或多个数字中的最大值
- math.abs($number)返回的绝对值
更多math
设置详细文档的请查看地址:https://sass-lang.com/documentation/modules/math
meta
的基础函数
// 引入meta相关方法
@use "sass:meta";
@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)
@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}
@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
)
// 输出css
pre span.stx-string {
color: #080;
}
pre span.stx-comment {
color: #800;
}
pre span.stx-variable {
color: #60b;
}
- meta.keywords($args) 返回传递给接受任意参数的 mixin 或函数的关键字
- **meta.type-of(value
的类型
number,string等` - **meta.variable-exists(name`(不带$)的变量
@debug meta.variable-exists("var1"); // false
$var1: value;
@debug meta.variable-exists("var1"); // true
h1 {
// $var2 is local.
$var2: value;
@debug meta.variable-exists("var2"); // true
}
更多meta
设置详细文档的请查看地址:https://sass-lang.com/documentation/modules/meta
selector
的基础函数---选择器
// 引入selector相关方法
@use "sass:selector";
@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false
selector.is-superselector(sub) 返回选择器是否匹配选择器
$super
匹配的所有元素$sub
-
selector.append($selectors...)名称组合器
@debug selector.append(".accordion", "__copy"); // .accordion__copy @debug selector.append(".accordion", "__copy, __image"); // .accordion__copy, .accordion__image
更多
selector
设置详细文档的请查看地址:https://sass-lang.com/documentation/modules/selector
string
的基础函数---字符串处理
// 引入string相关方法
@use "sass:string";
@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
- string.index(substring) 返回存在的第一个索引
- string.insert(insert, $index)返回插入到指定位置的文本,如果index大于长度添加到最后,如果小于字符串的负长度则添加到开头
- string.length($string) 返回string 中的字符数量
- string.slice(start-at, $end-at: -1)返回字符串start到end切片后的字符串
- string.to-upper-case($string) 字符串转变为大写返回
更多string
地址:https://sass-lang.com/documentation/modules/string
实际项目开发中常用的关于色彩计算方法
// 加深减淡主要是针对l亮度进行计算,0最暗 100%最亮
lighten(hsl(0, 0%, 0%), 30%) => hsl(0%, 0%, 30%)
darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
// 针对饱和度s进行计算 0-100%
saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)
desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%)
// 设置色相的值 0-360度
adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)