一.sass/scss的认识
今天我们来认识一个CSS的预处理器-------sass/scss,它可以让我们把css当成js来写,可以有变量,字符串,嵌套,函数,引入,扩展,循环,计算等等逻辑处理,让样式的编程不可那么的单一化,也可以减少 CSS 重复的代码,节省开发时间。
二.变量
变量可以存储以下信息:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
通过变量的形式 我们可以通过修改一个变量来达到全局的效果 ,而不是复用的要是修改都要全部修改,我们可以定义一下项目默认字体大小,基本颜色,边框 等待常用配置, 变量支持块级作用域,有全局变量跟局部变量,而定义变量我们用是$,跟PHP定义变量一样,而不是前端的var,let;
$myColor: #f50; //全局变量
div {
$_selfColor : #fd0 !global; //局部变量 要想变成全局变量 需要添加 !global,这样就可以在其他地方拿到
color: $myColor;
span {
color: $_selfColor;
}
}
.name{
color: $_selfColor;
}
================================================
编译后就是
div {
color: #f50;
}
div span {
color: #fd0;
}
.name {
color: #fd0;
}
三. 嵌套规则
sass可以让我们类似于html嵌套那样的一层一层的嵌套下去,避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理,而有时候我们需要用到父级元素,这里我们可以用&代替,可以让我们省下很多重复性东西,而且嵌套也遵守选择器的方法 比如子级选择器,序选择器,id选择器等等
$myColor: #f50; //全局变量
div {
$_selfColor : #fd0 !global; //局部变量 要想变成全局变量 需要添加 !global,这样就可以在其他地方拿到
color: $myColor;
// div下面的所有
span {
color: $_selfColor;
}
// div的第一级a
>a{
font-size: 12px;
}
p{
font-weight: bold;
}
// & 代表嵌套规则外层的父选择器。z这里只的是div 当前作用域的元素
&:hover{
color: #F0AD4E;
}
}
================================================
编译后就是
div {
color: #f50;
}
div span {
color: #fd0;
}
div > a {
font-size: 12px;
}
div p {
font-weight: bold;
}
div:hover {
color: #F0AD4E;
}
还有一个属性嵌套的规则,把通过属性的通过键值对的形式显示出来
/* 属性嵌套 */
div{
font :{
size: 12px;
weight : bold;
}
}
===================================
编译后
div {
font-size: 12px;
font-weight: bold;
}
还有一个 @import嵌套 和 命名嵌套,
//命名嵌套
.name{
color: #f00;
&-name{
font-size: 12px;
}
}
=========================
.name {
color: #f00;
}
.name-name {
font-size: 12px;
}
//@import嵌套
//index.scss'内容
.name-title{
color: #f00;
}
//在其他文件引入
.name{
@import '../index.scss';
}
===========
.name{
.name-title{
color: #f00;
}
}
四.运算
sass也支持跟编程一样的加减乘除运算,它除了数字的运算,还可以颜色值的计算,字符串的计算,布尔值的计算,数组的计算 ,其运算规则跟JS的计算规格差不多,更多的可以去官网查看
div {
font-size: (10px + 10px); //数字计算
color: (#f40500 + #040506); //颜色值计算
content: "Foo "+ 'Bar'; //字符串计算
}
==================
div {
font-size: 20px;
color: #f80a06;
content: "Foo Bar";
}
五.函数
sass也可以像编程一样定义函数,在需要的地方引入 ,规则也是差不多,也有参数传递,通过 @function 定义,function名字调用;
函数里面也可以做逻辑运算,但要通过 @return 返回计算结果; 参数的话要通过变量的形式传入,比如 参数名字是n 那要写成$n 而不是n;
@function grid-width($n) {
@return $n + 19px
}
div {
width: grid-width(5);
}
=============================
div {
width: 24px;
}
它也支持 使用关键词参数
//定义函数
@function grid-width($n) {
@return $n + 19px
}
div {
width: grid-width($n : 10); //关键词参数
}
==========================
div {
width: 29px;
}
六.混合指令 @mixin
mixin跟函数差不多,也是定义引用,也支持关键词参数;不过跟函数不一样的,他是通过 @include 来引入的,而且内容可以多层嵌套
@mixin test($color:blue) {
background: $color;
span{
color: #f00;
}
}
div{
@include test(#ff0040);
}
==========================
div {
background: #ff0040;
}
div span {
color: #f00;
}
而且sass的mixin还可以用类似于vue组件那种插槽solt来进行占位,通过 @content来占位
@mixin test {
div{
@content;
}
}
@include test {
span {
color: blue;
}
}
========================
div span {
color: blue;
}
七.@extend
@extend扩展,有点类似于编程的class的extend,它可以让我们复制一个相同样式,而不用重复的写相同的代码,也不用写一堆的类名,也可以引入多个 ,用逗号隔开 这个跟我们在html写多个类名的效果差不多
.fz30{
font-size: 30px;
}
.btn{
border-radius: 10px;
padding: 10px 20px;
border: none;
box-sizing: border-box;
}
.btn-success{
@extend .btn,.fz30;
color: green;
background: transparent;
border: 1px solid currentcolor;
}
===================================
.fz30, .btn-success {
font-size: 30px;
}
.btn, .btn-success {
border-radius: 10px;
padding: 10px 20px;
border: none;
box-sizing: border-box;
}
.btn-success {
color: green;
background: transparent;
border: 1px solid currentcolor;
}
八.控制指令---@if,@for,@each
sass也可以像编程那样进行条件判断,数据循环这类操作,
一.@if条件判断,满足对应的条件执行对应的代码,其他的代码样式忽略
$type : ocean;
.btn {
@if $type==ocean {
color: blue;
}
@else if $type==matador {
color: red;
}
@else if $type==monster {
color: green;
}
@else {
color: black;
}
}
=====================
.btn {
color: blue;
}
二.@for 循环 有时候我们有一个列表的图表 或者精灵图 要写很多类似的样式 通过循环我们可以省下很多代码,
循环有两种写法,一个是 @for $var from <start> through <end> 这个包含开始和结束长度 一个是 @for $var from <start> to <end>,只包含开头,不包含结束长度
//包含一 不包含 3
@for $i from 1 to 3 {
.name_#{$i}{
width: 2em * $i;
}
}
==========================
.name_1 {
width: 2em;
}
.name_2 {
width: 4em;
}
==========================
//包含一 也包含 3
@for $j from 1 through 3 {
.names_#{$j}{
width: 2em * $j;
}
}
============================
.names_1 {
width: 2em;
}
.names_2 {
width: 4em;
}
.names_3 {
width: 6em;
}
三. @each有点类似JS的for..in..,写法为$var in <list>
, $var
可以是任何变量名,比如 $length
或者 $name
,而 <list>
是一连串的值,也就是值列表
//类别字符串
@each $animal in puma, sea-slug, egret, salamander {
.#{$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");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
======================================
列表为数组
@each $animal in [a,b,c,d] {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
========================
.a-icon {
background-image: url("/images/a.png");
}
.b-icon {
background-image: url("/images/b.png");
}
.c-icon {
background-image: url("/images/c.png");
}
.d-icon {
background-image: url("/images/d.png");
}
九,sass封装的函数
这里就不介绍,可以去菜鸟教程-SASS进行查看,有一下对字符串,数组,数字,颜色的处理的函数