scss语法

最新推荐文章于 2024-09-22 21:41:31 发布

原创最新推荐文章于 2024-09-22 21:41:31 发布 · 788 阅读

0 ·

CC 4.0 BY-SA版权

scss 专栏收录该内容

1 篇文章

订阅专栏

SCSS是一种动态CSS语言，提供混合宏、继承、占位符、嵌套、运算、颜色功能等特性，简化CSS编写。它允许在CSS中使用JavaScript表达式赋值，并有区别于Less的变量符号（$）。SCSS支持命名空间和作用域，可以在服务器端处理，提供更高效的工作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scss 2019

scss 是一种动态css 语言

混合宏
继承
占位符
嵌套 Class中嵌套class，从而减少重复的代码
运算 CSS中用上数学表达式
颜色功能可以编辑颜色
名字空间(namespace) 分组样式，从而可以被调用
作用域局部修改样式
JavaScript 赋值在CSS中使用JavaScript表达式赋值

和less区别

变量在Less和Sass中的唯一区别就是Less用@，Sass用$
Less是基于JavaScript 实现的，是在客户端处理的
Sass是基于Ruby实现的，是在服务器端处理的

注释(less-js)

// 但这种不会被编译的注释
/*会被编译的注释*/

数据类型

scss 2012

scss 是一种编写css 的预编译器

嵌套简化 css 代码量
选择器 &父选择器
命名空间
定义变量 $开头定义 css 全局变量
插值语法 #{$attr}
继承 @extend

<style lang="scss" scoped>
    @import "~@assets/styles/define.scss";
</style>
/* 
嵌套:内层的样式将它外层的选择器作为父选择器
*/
.sign {
    * {
        user-select: none;
        outline: none;
      }
}
/*
父选择器&：用 & 代表嵌套规则外层的父选择器
|| .sign-container-form .item-code{}
*/ 
.sign-container-form {
  .item {
    &-code { input{width: 221px;}}
  }
}
/*
css 命名空间管理
font-family
font-size
font-weight
*/ 
.funky {
  font: 20px/24px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*
Sass 额外提供了一种特殊类型的选择器：占位符选择器
必须通过 @extend 指令调用
*/ 
/*
变量 $ 
嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），
不在嵌套规则内定义的变量则可在任何地方使用（全局变量）
将局部变量转换为全局变量可以添加 !global 声明
*/ 
/*
数据类型
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，
用空格或逗号作分隔符，1.5em 1em 0
2em, Helvetica, Arial, sans-serif
maps, 
相当于 JavaScript 的 object，(key1: value1, key2: value2)
*/ 
/*
SassScript 支持数字的加减乘除、取整等运算
(+, -, *, /, %)
*/ 
/*
插值语句 #{}
*/ 
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/*
一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式
@extend 继承
*/ 
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

参考链接

http://www.ruanyifeng.com/blog/2012/06/sass.html 2012 年教程

https://blog.youkuaiyun.com/Ginny_2017/article/details/100007285 2019 年