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这样的缩进语法,其他并无差别

相关推荐
拉不动的猪19 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程36 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041243 分钟前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴3 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript