scss基本语法---嵌套、循环、条件(@for,@if),混入@mixin,继承@extend,导入@import,

scss是css预编译器,可以简化css代码的书写,并可以编译成css文件使用;

有关scss的安装使用可以参考:Sass语法---sass的安装和引用_引入sass-CSDN博客

嵌套、循环、条件(@for,@if)

嵌套

scss支持选择器的嵌套写法,具体规则如下:

css 复制代码
// scss:

body{
    color:#ccc;
    .box{
        color: #666;
    }
}
css 复制代码
// css:

body {
  color: #ccc;
}
body .box {
  color: #666;
}

属性内部可以嵌套其他 选择器,内部的选择器会和外部的选择器形成子代选择器

css 复制代码
//scss:

body{
    color:#ccc;
    .box{
        color: #666;
    }
    &:hover{
        color:white;
    }
}
css 复制代码
//css:
body {
  color: #ccc;
}
body .box {
  color: #666;
}
body:hover {
  color: white;
}

嵌套伪类和伪元素时需要带上'&',否则伪类和伪元素会被识别成标签选择器

循环---@for

css 复制代码
@for $i from start to end{}

@for $i from start through end{}

以上时@for的写法,它们的的差别在于:to不包含end,through包含end,

转换成js的循环就像:

javascript 复制代码
// to:
for(let i = end;i<start;i++){
    
}

// through:
for(let i = end;i<=start;i++){
    
}

@for循环 常用来给数字差异的类名选择器子元素伪类添加差异化的属性

css 复制代码
// scss:

@for $i from 1 to 3{
    .box#{$i}{
        font-size: #{$i}em;
    }
}

.box{
    @for $i from 1 through 3{
        .box:nth-child(#{$i}){
            font-size: #{$i}em;
        }
    }
}
css 复制代码
// css:

.box1 {
  font-size: 1em;
}

.box2 {
  font-size: 2em;
}

.box .box:nth-child(1) {
  font-size: 1em;
}
.box .box:nth-child(2) {
  font-size: 2em;
}
.box .box:nth-child(3) {
  font-size: 3em;
}

以上的scss代码使用了模板语法,#{} 类似js的**${}**可以将scss变量转成css的字符;

注意:这里的css字符是指 100px 这种,而不是 'red'

条件---@if ,@else if, @else

和js的if语句一样,这里要注意scss里的布尔运算符(and ,or, not--- &&,||,!)

css 复制代码
// scss:
.box {
    @for $i from 1 through 3 {
        @if ($i == 2) {
            .box:nth-child(#{$i}) {
                color:#ccc;
            }
        }

        .box:nth-child(#{$i}) {
            font-size: #{$i}em;
        }
    }
}
css 复制代码
// css:

.box .box:nth-child(1) {
  font-size: 1em;
}
.box .box:nth-child(2) {
  color: #ccc;
}
.box .box:nth-child(2) {
  font-size: 2em;
}
.box .box:nth-child(3) {
  font-size: 3em;
}

混入@mixin,@include

@mixin混入可以定义一个css属性块,类似于js定义函数,使用@include可以将属性块的内容混入到选择器的属性中,

tips:@mixin可以携带参数

scss:

css 复制代码
@mixin size($arg){
    width: $arg;
    height: $arg;
}
@mixin color{
    color:#ccc;
}

.box{
    @include size(100px);
    @include color;
}

css:

css 复制代码
.box {
  width: 100px;
  height: 100px;
  color: #ccc;
}

继承@extend

@extend 可以将其他选择器中的属性混入到自身中,

scss:

css 复制代码
.box{
    @include size(100px);
    @include color;

}

%size{
    width: 100px;
    height: 200px;
}

.item{
    @extend .box;
    @extend %size;
}

css:

css 复制代码
.box, .item {
  width: 100px;
  height: 100px;
  color: #ccc;
}

.item {
  width: 100px;
  height: 200px;
}

注意:当使用%标记选择器时,scss不会将其编译成css选择器,这样就变成了一个类似于@mixin混入的效果

导入@import

在scss中,可以使用@import导入(引用)其他scss文件(不同于js,scss文件并不需要导出),通常这会用来单独存放定义好的scss变量

css 复制代码
@import 'xxx.scss'
css 复制代码
// _root.scss:
// 使用'_'命名的scss文件不会被编译成css,
// 此文件可以作为scss模块进行导入

$bgLeft: rgb(255, 185, 185);
$bgRight: rgb(255, 228, 170);
$bg:#ccc;


// style.scss:
@import '_root.scss';

**注意:**使用'_'命名的scss文件不会被编译成css,

补充:sass和scss

sass和scss是同一个css预编译器,只是文件名称和写法上稍有差异,(.sass .scss)

可以看到在写法上,scss采用的是和css一样的{}包裹块,而sass使用的是类似python这样的缩进语法,其他并无差别

相关推荐
我要洋人死21 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人33 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人34 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR39 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香41 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969344 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#