scss语法入门

scss 是 sass3的新版本,也是目前推荐的语法,以.scss结尾的文件
所以 scss == sass3最新版本,目前就使用scss。

scss引入其他文件

1.引入其他 .scss 文件

@import 'index.scss'  

这样的话,文件在编译后,会自动把引入的文件和当前文件合并为一个.scss文件

2.引入其他 .css 文件

@import 'index.css'  

和引入.scss文件不同,这样引入的.css文件在编译后不会和当前文件合并为一个.scss文件,而是继续保持为外链引入方式

scss注释方法

scss的注释有两种

1.块注释
/*
*/
2.行注释
//

scss变量

scss变量分为3种,以$符号开头,后面紧跟变量名。变量名和变量值之间用冒号:分开

1.常规变量

$key: value;

2.默认变量

$key: value!default;

默认变量是可以被覆盖的,具体覆盖方法如下
$font: 12px;
$font: 14px!default;

3.特殊变量

$fontSize:14px;
font:#{$fontSize}

4.多值变量

多值变量分为list和map两种类型,list类似于js的数组,map类似于对象

嵌套

嵌套分为两种:1.选择器嵌套(目前经常使用的)、2.属性嵌套:不经常使用

  1. 选择器嵌套
// scss 文件
ul{
    li{
        a{

        }
    }
}

//解析为 css 文件

ul{

}  
ul li {

}  
ul li a{

}

//scss 在属性选择器中,&表示父元素选择器

a{
    &:hover{

    }
}

//解析为 css 文件
a{

}
a:hover{

}
  1. 属性嵌套
// scss 文件
div{
    border{
        top:{
            width:1px;
        }
        left:{
            width:2px;
        }
    }
}

//解析为 css 文件

div{
    border-top:1px;
    border-left:2px;
}

混合

@mixin 调用@mixin方法需要使用 @include

// scss 普通混合

@mixin font{
    line-height:10px;
    color: #fff;
}

.footer{
    @include font;
}

// 解析为 css 文件

.footer{
    line-height: 10px;
    color: #fff;
}

// scss 文件

@mixin font($size:12px){  //默认参数 默认12px
    font-size: $size;
}

.footer{
    @include font(16px);
}

继承

使用继承会让该选择器继承指定选择器的所有样式,要使用关键词@extend,后面跟上指定的选择器

// scss文件
.font{
    font-size:14px;
    height: 16px;
}
.footer{
    @extend .font;
    border-width: 2px;
}

//解析问 css 文件

.font, .footer{
    font-size:14px;
    height: 16px;
}
.footer{
    border-width: 2px;
}

站位选择器

%选择器名,通过@extend 去调用,如果不调用,则文件编译后不会出现改该冗余css文件

// scss 文件
%dir{
    font-size: 14px;
}
%clear{
    overflow: hidden;
}
div{
    @extend %dir;
}

/*只有 %dir 选择器被调用了,%clear 在编译的时候会被当做冗余文件给过滤掉,不会出现在编译后的.css文件中*/

函数

sass 内置了很多函数,自己也可以定义函数。以 @function 开始 @return 返回值

//scss 文件
@function per($data){
    @return $data/10 + px;
}

div{
    font-size: per(140);
}

//解析为 css文件
div{
    font-size: 14px;
}

其他功能

其他功能包括以下几点

  1. 运算:对于(数字,颜色,变量)的四则(加减乘除)运算,运算符前后各保留一格空格
  2. if判断:@if可以单独使用,也可以配合@else、@else if 一起使用
  3. 三目运算符:if(true,1px,2px),返回的值是1px,if(false,1px,2px),返回的值是2px
  4. for循环,共有两种写法,1:@for $var from through
    2:@for $var from to 。两种写法唯一的区别就是,through包括end这个数,to不包括end这个数。
  5. each循环,@each $var in ,list和map分别表示为list和map类型数据。

项目中经常用到的功能

  1. 变量
  2. 嵌套
  3. &
  4. 函数:用于移动端页面计算rem或者vw最佳
  • 13
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
LESS和SCSS都是一种基于CSS之上的高级语言,它们都提供了更多的功能和特性,可以大大提高代码编写的效率。LESS语法相对来说更加清晰明了,容易上手。而SCSS在功能上更加强大,支持条件语句等高级特性。 LESS语法示例: 1. 变量声明:使用@符号来声明变量,例如:@color: #333; 2. 混合器:使用.mixin来定义和使用代码块的片段,可以实现代码的复用,例如:.mixin { font-size: 14px; color: #333; } 3. 嵌套规则:可以在父选择器内嵌套子选择器,简化了选择器的书写,例如:.parent { .child { color: red; } } 4. 运算:可以对数值进行加减乘除等运算,例如:@width: 100px + 50px; 5. 导入文件:可以使用@import语句导入其他LESS文件,例如:@import "variables.less"; SCSS语法示例: 1. 变量声明:使用$符号来声明变量,例如:$color: #333; 2. 混合器:使用@mixin来定义和使用代码块的片段,可以实现代码的复用,例如:@mixin mixin { font-size: 14px; color: #333; } 3. 嵌套规则:可以在父选择器内嵌套子选择器,简化了选择器的书写,例如:.parent { .child { color: red; } } 4. 运算:可以对数值进行加减乘除等运算,例如:$width: 100px + 50px; 5. 导入文件:可以使用@import语句导入其他SCSS文件,例如:@import "variables.scss"; 总结来说,LESS和SCSS语法上有一些细微的差异,但整体上非常相似,都提供了类似的功能和特性,具体使用哪一种语法主要取决于个人喜好和项目需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [less和scss的区别](https://blog.csdn.net/Jadon_z/article/details/126750935)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [LESS 和 SCSS 的区别](https://blog.csdn.net/sky89299/article/details/124484021)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值