SCSS的具体详解和与less的区别

最新推荐文章于 2024-05-29 11:04:01 发布

laluneX

最新推荐文章于 2024-05-29 11:04:01 发布

阅读量7.6k

点赞数 12

分类专栏： CSS 文章标签： css scss sass less

本文链接：https://blog.csdn.net/weixin_45969777/article/details/105417404

版权

CSS 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

一、SCSS的四种输出格式与SCSS与Sass的区别

可以参考这位老哥的
简单来说
SCSS更简单一点，没有什么奇怪的语法与奇怪的缩进，与less相差不大，利于使用与学习（推荐）
Sass有更加严格的语法（反正我看起来怪怪的）
不过SCSS与Sass是同宗同族的，不过Sass是老大哥

二、注释

与less相同

关于/**/
多行注释，会在原生css文件里面保留注释，但在压缩时注释就会消失

/*下面是SCSS文件*/

/*
.container div:nth-child(odd){
  background-color: #eee;
}
.container div:nth-child(even){
  background-color: #ccc;
}*/


/*下面是对应的SCSS文件生成的css文件*/

/*
.container div:nth-child(odd){
  background-color: #eee;
}
.container div:nth-child(even){
  background-color: #ccc;
}*/

关于//
单行注释，不会在原生css文件里面保留注释，也不会在压缩的文件里面显示

/*下面是SCSS文件*/

//.container div:nth-child(odd){
//  background-color: #eee;
//}
//.container div:nth-child(even){
//  background-color: #ccc;
//}


/*下面是对应的SCSS文件生成的css文件*/

什么也没有

/*!*/
强制注释，会在原生css文件里面保留注释，也会在压缩的文件里面显示

/*下面是SCSS文件*/

/*!
.container div:nth-child(odd){
  background-color: #eee;
}
.container div:nth-child(even){
  background-color: #ccc;
}*/


/*下面是对应的SCSS文件生成的css文件*/

/*
.container div:nth-child(odd){
  background-color: #eee;
}
.container div:nth-child(even){
  background-color: #ccc;
}*/

三、变量

变量定义要使用$符号（less是@符号定义变量），也可给属性定义变量（不过less是使用@{name}的方式）

/*SCSS*/
$primary:#ccc;					/*定义变量*/
$b:border;
$bg:background;
$url:"image.jpg";
$primary-plus:1px solid $primary;	/*定义变量里面使用变量*/
.container div:nth-child(even){
  #{$bg}-color: $primary;	/*使用变量*/
}
.container div:nth-child(odd){
  background-color: #eee;
  #{$b}: $primary-plus;			/*使用变量*/
}
.box2{
  background-image: url($url);
}
/*CSS文件*/
.container div:nth-child(even) {
  background-color: #ccc;
}
.container div:nth-child(odd) {
  background-color: #eee;
  border: 1px solid #ccc;
}
.box2 {
  background-image: url("image.jpg");
}

四、嵌套

与less相同的地方

在这里插入图片描述

不过与less不同的是SCSS有属性的嵌套

在这里插入图片描述

五、伪类的使用

与less相同
在这里插入图片描述

六、混合（类似与函数，在语法上面与less不尽相同）

混合必须用@mixin来定义，@include来调用

固定值的混合

/*SCSS*/
@mixin a{							/*固定值的混合*/
  width: 100px;
  height: 100px;
}
ul{
  @include a;						/*混合的引用*/
  border: 1px black solid;
}
/*生成的css*/
ul {
  width: 100px;
  height: 100px;
  border: 1px black solid;
}

可变化值的混合

/*SCSS*/
@mixin a($with:100px,$color:red,$height){	/*带有变量有更好的机动性，且这些变量有一些有初始值*/
  width: $with;
  height: $height;
  background-color: darken($color,20%);			/*darken（v1，v2）颜色加深函数，v1代表需要加深的颜色，v2代表加深的百分比*/
}
ul{
  @include a($height:100px);					/*调用混合，当使用命名空间的时候混合里面的变量顺序就不重要了*/
  border: 1px black solid;
}
/*生成的css*/
ul {
  width: 100px;
  height: 100px;
  background-color: #990000;
  border: 1px black solid;
}

七、继承（作用与less相同，但语法与less不同）

它只能继承固定值的混合且会继承被继承者所有使用的选择器，可以增加代码的复用性，但灵活性不强

/*SCSS*/
.aa{
  width: 200px;
  height: 200px;
  border: 1px;
}
.aa .color{
  background-color: #0f0f0f;
}
.box:nth-of-type(1){
  @extend .aa;				/*继承*/
}
/*生成的css*/
.aa, .box:nth-of-type(1) {			/*继承了aa类的所有选择器*/
  width: 200px;
  height: 200px;
  border: 1px;
}

.aa .color, .box:nth-of-type(1) .color {
  background-color: #0f0f0f;
}

八、文件引入

/*ppp.scss文件*/
@import "ooo";				/*原文件名为_ooo.scss，这里允许这样的简写*/
/*_ooo.scss文件，注意文件必须要以_开头*/
*{
  padding: 0;
  margin: 0;
}

这里的引入的文件会被当成一个partials，也就是说该文件不会被立即编译成css文件，只有在import的时候才会去编译_ooo.scss文件，但要注意的是文件必须要以_开头

九、Data Type

有number、string、list、map、color、boolean…
在这里插入图片描述

list类型的数据格式为：

$list:1px blue solid;
/*$name:value*/

map类型的数据格式为：

$map:(light:#ffffff,dark:#000000,border:1px blue solid);
/*$name:(key1:value1,key2:value2,key3:value3,...)，这里的key不是css属性*/

color类型的数据格式为：

$color:#ffffff;
/*$name:value*/

boolean类型数据：

$bool:true;
/*$name:value*/

less里面没有type-of（）方法

十、运算

与less里面有一定的区别

/*数字运算*/
width: (200px/2);						/*100px，这里要加括号，因为/是特殊字符*/				
width: (200px/2px);						/*100，这里的px会被抵消掉*/
width: 200px+200;						/*400px*/
width: (200px-150);						/*50px，这里要加括号，因为-是特殊字符*/
width: 20px*10px;						/*这里会发送错误，因为px*px了*/
width: 20px*10;							/*200px*/

/*string运算，结果分为带引号的字符串与不带引号的字符串*/
border: 3px bla+ck solid;				/*3px black solid*/
border: 3px "bla"+ck solid;				/*3px "black" solid*/
width: 150+'px';						/* '150px' */
width: 150+px;							/*150px*/
border: 3px bla-ck solid;				/*3px bla-ck solid*/
border: 3px bla\ck solid;				/*3px bla\ck solid*/

十一、函数

数字函数

/*number*/
abs(num)									/*绝对值*/
round(num)									/*四舍五入*/
ceil(num)									/*上取整*/
floor(num)									/*下取整*/
percentage(num)							/* 0<num<1，获得值的百分比*/
min(num)									/*最小值*/
max(num)									/*最大值*/

字符串函数

/*string*/
to-upper-case(str)							/*全部字母大写*/
to-lower-case(str)							/*全部字母小写*/
str-length(str)								/*字符串的长度*/
str-index(str,str1)							/*获取指定字符str1串在原字符串的位置*/
str-insert(str,str1,index)					/*插入指定字符串str1到原字符串的index位置(从1开始)*/

例子：
在这里插入图片描述

颜色函数

/*color*/
rgb(v1,v2,v3)								/*红绿蓝*/
rgba(v1,v2,v3,v4)							/*红绿蓝+透明度*/
hsl(v1,v2,v3)								/*色相，饱和度，明度*/
hsla(v1,v2,v3,v4)							/**色相，饱和度，明度+透明度*/
adjust-hue(v1,v2)							/*给v1颜色调整为v2度数的颜色*/
lighten(v1,v2)								/*给v1颜色增加v2的明度*/
darken(v1,v2)								/*给v1颜色减小v2的明度*/
saturate(v1,v2)								/*给v1颜色增加v2的饱和度*/
desaturate(v1,v2)							/*给v1颜色减小v2的饱和度*/
opacify(v1,v2)								/*给v1颜色增加v2的不透明度*/
transparentize(v1,v2)						/*给v1颜色增加v2的透明度*/

例子：
adjust-hue(v1,v2)
在这里插入图片描述
lighten(v1,v2)与darken(v1,v2)

saturate(v1,v2) 与desaturate(v1,v2)

opacify(v1,v2)与transparentize(v1,v2)

列表函数

/*list*/
length(list)										/*获得列表数据list的长度*/
nth(list,index)										/*获得列表数据list内的第index个数据（从一开始）*/
index(list,value)									/*获得在列表数据list内的值为value的数据的索引（从一开始）*/
append(list1,list2)									/*在列表数据list1的后面添加列表list2的数据*/
join(list1,list2,value)								/*把列表数据list1与list2连接起来，value是分隔符（value可以有也可以没有）*/

例子：
在这里插入图片描述

map函数

length(map)									/*返回map类型数据的个数*/
map-get(map,key1)							/*得到map类型数据内的key=key1的数据*/
map-keys(map)								/*得到map类型数据内的所有key值*/
map-values(map)								/*得到map类型数据内的所有value值*/
map-has-key(map,key1)						/*判断map类型数据内的是否存在对应的key1，返回true|false*/
map-merge(map1,map2)						/*把map1与map2合并*/
map-remove(map,key1,key2,...)				/*去除map内的key为key1，key2的项*/

例子：
在这里插入图片描述

自定义函数

@function 名字(形参1，形参2){
  .......
}

例子：
错误时的错误信息（提示信息会显示在css文件里面）
@error
在这里插入图片描述
错误时的警告信息（提示信息会显示在命令行上面）
@warn

十二、布尔值的判断

在这里插入图片描述

十三、控制指令

@if，@else if，@else

/*SCSS*/
$v:2;
@if $v>5 {
  border:5px blue solid;
}
@else if $v>2 {
  border:2px blue solid;
}
@else {
  border:1px blue solid;
}
/*CSS文件*/
border: 1px blue solid;

@for

@for $i from 1 to 3{				/*从1到3，不包括3，也支持从大到小遍历*/
    ...
  }
@for $i from 1 through 3{			/*从1到3，包括3，也支持从大到小遍历*/
  ...
}

@each（只能是list类型，不能是map类型的）

/*SCSS文件*/
$icons:success error warning;				/*这是一个由不带引号的字符串组成的list*/
@each $icon in $icons{
  icon-#{$icon}{							/*这里使用#{$icon}的原因是因为它被包含在一个属性内*/
    background-image: url("../images/#{$icon}.jpg");	/*这里使用#{$icon}的原因是因为它被包含在一个字符串内*/
  }
}
/*CSS文件*/
icon-success {
  background-image: url("../images/success.jpg");
}

icon-error {
  background-image: url("../images/error.jpg");
}

icon-warning {
  background-image: url("../images/warning.jpg");
}

@while

/*SCSS*/
$n:6;
@while $n>0{
  .item-#{$n}{							/*这里使用#{$icon}的原因是因为它被包含在一个属性内*/
    background-image: url("../images/image0#{$n}.jpg");		/*这里使用#{$icon}的原因是因为它被包含在一个字符串内*/
  };
  $n:$n - 3;							/*$n减小，不能使用$n--，且减号两边必须有空格因为减号是特殊符号*/
}
/*CSS文件*/
.item-6 {
  background-image: url("../images/image06.jpg");
}

.item-3 {
  background-image: url("../images/image03.jpg");
}

本文只用于个人学习与记录

laluneX

关注

12
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
SCSS的具体详解和与less的区别

一、SCSS的四种删除格式与SCSS与Sass的区别可以参考这位老哥的简单来说SCSS更简单一点，没有什么奇怪的语法与奇怪的缩进，与less相差不大，利于使用与学习（推荐）Sass有更加严格的语法（反正我看起来怪怪的）不过SCSS与Sass是同宗同族的，不过Sass是老大哥二、注释与less相同关于/**/多行注释，会在原生css文件里面保留注释，但在压缩时注释就会消失/*...
复制链接

扫一扫