scss语法

最新推荐文章于 2023-05-23 10:03:28 发布
最新推荐文章于 2023-05-23 10:03:28 发布
阅读量713 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32265719/article/details/93168289
版权

scss 2019 

scss 是一种动态css 语言

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


和less区别

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

注释(less-js)

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


数据类型

scss 2012

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

  1. 嵌套  简化 css 代码量
  2. 选择器  &父选择器
  3. 命名空间
  4. 定义变量  $开头定义 css 全局变量
  5. 插值语法   #{$attr}
  6. 继承 @extend
<style lang="scss" scoped>
    @import &#
最低0.47元/天 解锁文章
良言SE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scss 基本语法整理
wanghuan1020的博客
12-17 6793
scss 基本语法整理scss 基本使用Variables 变量嵌套 Nesting普通嵌套调用父选择器属性嵌套混合 Mixins基本使用携带参数继承 extrend导入 import注释 Comment数据类型 Data Type概览number 数字类型算数运算数字函数string 字符串类型字符串连接字符串函数color 颜色类型表示颜色的方式处理颜色的函数list 列表类型list 相关的函数Map 特殊的列表map 相关的函数Boolean 布尔Interpolation 插值Control Di
scss常用语法和基本使用
最新发布
工作的日常记录和平凡的生活分享
05-29 940
SCSS（Sassy CSS）是一种CSS预处理器，它在CSS的基础上增加了变量、嵌套规则、混合宏等高级功能，使得CSS代码更加模块化和可维护。SCSS的语法扩展了CSS，允许开发者以一种更加结构化和编程友好的方式来编写样式表。
Scss基本语法
xcgljgq的博客
05-23 536
就可以正确的将群组选择器的嵌套解出来了，首先将.container与h1，h2，h3分别组合，再将三者组合成一个新的群组选择器与容器元素组合。所以，我们约定，SASS中的局部文件的文件名以下划线开头，这样就不会在编译时单独编译这个文件从而输出CSS，只把这个文件用作导入。变量可以在规则块定义之外存在，在规则块内定义的只能在规则块内使用，规则块外定义的则可以在本样式表的所有规则块使用。在CSS中，选择器往往需要重复书写，而在SCSS中，只需要写一遍，后续编译之后会自动排列称CSS中的样式。
你真的会用scss吗 scss常用语法总结
marendu的博客
09-15 1万+
文章目录一、嵌套二、父选择器三、变量四、插值语句五、运算与数据类型五、导入scss @import六、继承样式 @extend七、常用的指令@each@mixin 和 @include 对于scss文档写了很多，但是常用语法就这些，下面做一个总结 一、嵌套 #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } //编译为 #main p
如何写出高质量的scss、less...
c_liufeng的博客
10-24 422
}global;}@content;}}}
vscode-scss:所有Sass文件中的变量，混入和函数的IntelliSense（仅SCSS语法）
04-29
vscode-scss 工作空间中所有文件的SCSS IntelliSense（变量，混入和函数）。 捐款 你喜欢这个项目吗？ 通过捐赠，创建问题或请求请求来支持它。 安装 插件安装分为以下几个阶段： 按F1并选择Extensions: Install ...
scss-parser:Sass 的 SCSS 语法的解析器和 AST 树
05-31
`scss-parser`是一个专门用于解析SCSS语法的工具，能够将SCSS代码转化为抽象语法树（Abstract Syntax Tree，AST），方便后续处理和分析。 ### SCSS 语法 SCSS语法是Sass的语法之一，与原始的Sass（.sass）语法相比...
scssparse:用 JavaScript 编写的 Sass 的 SCSS 语法的解析器和 AST
06-13
SCSSParse是一个基于JavaScript开发的库，专门用于解析Sass语言中的SCSS语法，并生成抽象语法树（AST）。这个库的出现，对于开发者来说，是一个强大的工具，它可以帮助理解和操作SCSS代码，尤其是在构建自动化工具、...
bulma-scss：Bulma SCSS-Bulma CSS Framework文件转换为SCSS语法
02-03
Bulma SCSS是Bulma CSS框架的一个版本，它将原始的CSS代码转换为了Sass（Syntactically Awesome Style Sheets）语法，也就是SCSS。Sass是CSS的一个预处理器，它提供了更强大的功能，如变量、嵌套规则、混合（mixins...
Syntax-highlighting-for-Sass:Sublime Text 3软件包，用于同时突出显示Sass和SCSS语法
04-27
Sass的语法突出显示这是Sublime Text 3软件包，它纯粹是在突出显示Sass和SCSS语法的同时尽可能地提高准确性。 请确保您的Sublime Text 3版本高于Build 3103。 该软件包已接管了软件包名称“ Sass”，请从软件包控制...
scss用法总览
weixin_50557122的博客
06-16 2297
1.动态样式语言：也称为预编译样式语言，指在CSS基础之上添加一些动态语言的特性，如变量、运算符、函数等，可以极大的提高样式代码的编写效率和可维护性。 2.当前主流动态样式语言有三种： ①Sass：最早诞生，功能最全面 —— Bootstrap4之后使用 ②Stylus：功能强大，但是语法稍复杂 ③Less：语法简单 —— Bootstrap3之前使用 3. Sass：Syntactically Awesome Stylesheets，是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量
scss常用语法
greed
05-25 881
变量 变量的定义以$开头，某个变量的作用域仅限于他们定义的层级以及子层级。如果变量是定义在所有嵌套选择器之外的，那么他们可以在各处被调用。 $col:#ccc .div{ background-color:$col } 相当于 .div{ background-color:#ccc } 如果希望某个在子选择器中定义的变量能够成为全局变量，可以使用!global关键字： #main { $width: 5em !global; width: $width; } #sidebar { width
scss基本语法使用
yuxiaoc的博客
11-22 1068
scss基本语法简单使用 文章目录scss基本语法简单使用前言一、what is scss？二、安装三、基本语法1.变量2.嵌套3.@mixin @include4.函数5.继承 extend6.引入7.注释 前言 CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发。 CSS预处理器：为css加入编程元素。 提示：以下是本篇文章正文内容，下面案例可供参考 一、what is scss？ Sass 是一款强化 CSS 的辅助工具，它在
scss基本用法及详解及进行模块化开发
眸中客的博客
09-22 2017
scss的基本用法： 1、基本功能（常用） (1)、导入：@import，可单独导入，也可同时导入多个 （文件可加后缀（允许scss和sass），也可不加（如果没有后缀，则会找到相同名字并且后缀即拓展名为.scss或者.sass的文件）） <1>、导入单个 @import "../colorTool/colors"; <1>、导入多个@import "../variableTool/quanti......
一篇完整的 Scss 学习指南，看这篇就够啦
热门推荐
前端达人
02-21 1万+
作者：小猪努力学前端https://juejin.cn/post/7055101823442485255前言今时不同往日，能叫我们切图仔的只能是我们自己！在JavasScrip框架满天飞的...
如何使用SASS
storyoco的博客
06-27 6195
1.背景介绍 1.1什么是Sass Sass 是一款强化 CSS 的辅助工具，是预编译器。它在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能。 1.2诞生背景 CSS不是一个完美的语言。CSS简单易学，却也能迅速制造严重的混淆，尤其是在工程浩大的项目中。这就是 Sass 出现的契机，作为一种元语言，通过提供额外的功能和工具可以改善 CSS 的语法。同时，保留了 CSS 的原有...
Sass(Scss)基础梳理与实践
m0_70521709的博客
05-04 233
} 编译后变成： .container { margin: 20px auto; } .container p { color: red; } 与前面一致 也可以把整个$margin-tb当作Lists来看待，不用一个个分开写。 $p-color : red; $margin-tb : 20px auto; // Lists .container { margin: $margin-tb; p { color: $p-color; } } 编译结果与前一致 Lists就是一个组合数据类型，各项之间由空格隔开
less语法 scss语法
08-23
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 ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值