Sass的两种文件后缀 sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...混合指令 (Mixin Directives) 9.1 不带参数的简单Mixin 混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。...继承(扩展) 11.1 基本继承 sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。...这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。
Sass函数有两种： 一、sass内置函数——跟代码块无关，称为functions。...：可重用的代码块，可以看做是Sass中的函数， 在Sass中，用"@mixin"来声明一个混合宏。...大括号中，当$shadow的参数数量值大于或等于1时，表示有多个阴影值，反之调用默认的参数值"0 0 4px rgba(0,0,0,.3)". 2.调用混合宏@include 在实际调用中，其匹配了一个关键词...各有千秋 各有各的优点与缺点 a) Sass 中的混合宏使用 //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { ...但有一个例外： 在使用#{ }插值语句时，有引号字符串将被编译成无引号字符串。这样是为了方便在混合指令（mixin）中引用选择器名。
二、less和sass的相同之处 Less和Sass在语法上有些共性，比如下面这些： 1、混入(Mixins)——class中的class； 2、参数混入——可以传递参数的class，就像函数一样；...： 多次频繁出现的值、需要修改的值，设为变量 (2)、混合(MiXins) ①无参混合 声明：.name{} 选择器中调用：.name; ②代参混合 无默认值声明：.name(@param){...>>>无参混合，会在css中编译除同名的class选择器，有参的不会 (3)、less的匹配模式：使用混合进行匹配，类似于if结构 声明： .name(条件一，参数){} .name(条件二，参数...中的运算，会将单位也进行运算，使用时需注意最终单位 例：10px10px=100pxpx (3)、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套 选择器嵌套 ul{ li{} } 后代 ul{...同less >>>优点；可以传参，不会生成同名class； >>>缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！
2.5 SCSS 混合指令 (Mixin Directives) 混合指令（Mixin）用于定义可重复使用的样式。...混合指令可以包含所有的 CSS 规则，绝大部分 SCSS 规则，甚至通过参数功能引入变量，输出多样化的样式。...可变参数 2.5.2 @mixin混入总结 mixin是可以重复使用的一组CSS声明 mixin有助于减少重复代码，只需声明一次，就可在文件中引用 混合指令可以包含所有的 CSS 规则，绝大部分...通过 #{} 插值语句可以在选择器、属性名、注释中使用变量： 2.10 SCSS 常见函数的基本使用 常见函数简介，更多函数列表可看：Sass: Built-In Modules...$color; } 2.16 SCSS 中 @at-root 使用 作用：@at-root 可以使被嵌套的选择器或属性跳出嵌套【例子：比如一段嵌套的样式对应的html有一天需要移动到另一层div
SCSS 是 Sass 引入新的语法，其语法完全兼容css3，并且继承了Sass的强大的功能，SCSS 是CSS的超级（扩展）， 因此，所有在CSS 中正常工作的代码也能在SCSS 中正常的工作...使用变量： 变量声明 $highlight-color: #f90; 如果一个变有多个值可以用逗号分隔。...文件 使用sass的@import规则并不需要指明被导入文件的全名。 ...@include来使用这个混合器， 放在你希望的任何地方。...参数默认值使用： $name: default-value 的生命形式。
1、CSS 预编译语言概述 CSS 作为一门样式语言，语法简单，易于上手，但是由于不具备常规编程语言提供的变量、函数、继承等机制，因此很容易写出大量没有逻辑、难以复用和扩展的代码，在日常开发使用中，如果没有完善的编码规范...中通常会使用 Sass 编写样式代码，Laravel 默认提供的样式代码也是 scss 结尾的，也是使用的 Sass 语言。...3、Sass 使用语法 Sass 提供了变量、嵌套、混合、导入、循环等功能，不过作为有其他编程语言功底的我们来说，学习起来非常简单，花个一个小时就熟悉了，下面我们逐一来介绍这些功能。...混合（Mixin） 有的时候，我们可能有一段 CSS 样式代码需要在多个地方使用，这可以通过 Sass 提供的混合（Mixin）功能来实现，定义混合代码的时候需要在选择器前面加上 @mixin 标识，引用混合代码的时候需要通过...mixin 函数 函数和混合有点类似，不过函数更加强大，可以传入参数并实现运算功能，函数通过 @function 标识声明，函数名允许出现短划线 -，函数体内可以使用在函数声明之前定义的所有变量，同时计算时会带上变量声明时的单位
混合(mixin) sass 中使用 @mixin 声明混合，可以传递参数，参数名以 $ 符号开始，多个参数以逗号分开，也可以给参数设置默认值，声明的 @mixin 通过 @include 来调用。...这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。...ps:在 @media 中暂时不能 @extend ， @media 外的代码片段，以后将会可以。 函数 sass 定义了很多函数可供使用，当然你也可以自己定义函数，以 @function 开始。...sass 的官方函数链接为：sass function ，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以 lighten 减淡和 darken 加深使用最多，其调用方法为 lighten(color...对于 sass 提供的工具你已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。 sass文档 sass函数列表 sass guidelines
而 less 的 Mixins 允许你在某个选择器内，直接使用其他选择器内的属性样式，所以中文翻译才有混合，或混入之说，其实也就是将其他的属性样式混合到当前选择器中。...也可以在基本选择器后面加上 () 括号，这样一来，这个就会被当做模板处理，作用类似于函数，可接收参数，使用时就类似于调用函数那么使用，如果不传参，调用时也可以将括号省略。...既然是作为函数使用，那么它们存在的意义就只是被调用，所以转换后的 CSS 中并不会存在这个函数。...但 npm 安装的 sass 跟在 Ruby 下安装的 sass 是否有和区别，我不清楚，用段时间，如果有啥问题再来说说。...最后，Sass 虽然有 .sass 和 .scss 两种后缀名的文件，但建议使用 .scss，因为前者的语法跟 CSS 很不一样，使用起来会有些不习惯，当然如果你有 Ruby 基础的话，可能会比较喜欢这种
尽量不使用合并选择器列，因为如果凭个人推理的话，会出现排列组合的情况，所以 SASS 编译器只会保留有用的组合形式，但依旧会存在排列组合的情况，有可能会留下隐患。...在指令中延伸 在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS. g....混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。 注意：这不是函数！没有返回值！！...这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理 @mixin mar($value...) { margin: $value; } # 4.向混合样式中导入内容...所有的$value map-has-key($map, $key) 判断$map中是否存在$key，返回对应的布尔值 keywords($args) 返回一个函数的参数，并可以动态修改其值 # e.
@extend 继承另一选择器样式@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。...（例如.error）的地方插入扩展选择器（例如.seriousError）混合(mixins)混入(mixin)通过 @mixin 指令定义。...换肤添加全局样式,动态改变主题通过scss 定义多套主题使用混合模式动态取值// 1.主题定义$theme-default: ( font-color: red, font-size: 14px, ...map中的最后一对键值/值后面的逗号可以省略键值必须是唯一的键值/值可以是Sass的任何类型，包括列表和其他的Sass mapMaps的主要操作使用的是 SassScript 函数。...map-get函数用于查找map中的值，map-merge函数用于添加值到map中的值， @each 指令可以用来为 map 中的每个键值对添加样式。map中键值对的顺序和map创建时始终相同。
w=2490&h=1409&e=png&b=1a1a1a" alt="image.png" /> 如何编写SCSS 因为我们的Sass使用.scss作为文件后缀名，不能直接在标签里使用...我们稍后会在文章中更详细地介绍局部文件。 在SCSS中使用混合（Mixins） 混合（Mixin）是一种用于将一组CSS属性和规则封装在一个可重用的代码块中的特性。...）： 可以通过使用@include指令将上面定义的混合在css样式中使用，后面跟着混合的名称和它所需的任何参数。...SCSS中的函数的工作方式类似于编程语言中的函数，它们接受输入（参数）并返回值。 以下是SCSS中函数工作的示例； 内置函数：SCSS提供了许多内置函数，你可以使用它们来操作值、执行计算和修改样式。...中的继承 SCSS还可以通过使用 @extend 指令后跟元素选择器，实现属性从父元素继承到子元素。
提交逻辑 ：可以像高级语言一样编写逻辑性的css代码 Sass 和 SCSS 区别 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，...安装 安装之sass前需要查看是否安装了ruby ruby -v 安装sass sudo gem install sass 判断是否安装成功 $ sass -v Ruby Sass 3.7.4 vue中使用...header nav a { color:green; } 那么在 Sass 中，就可以使用选择器的嵌套来实现： nav { a { color: red; header...中，使用@mixin来声明一个混合宏。...简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。
一、Sass简介 Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它使用缩进语法（Sass）或类似CSS的新语法（SCSS），通过编译转换成普通的CSS...Sass的出现使得CSS编写更加结构化和模块化，通过变量、嵌套、混合（mixin）、函数、控制指令等高级功能，极大地提高了开发效率和代码的可维护性。...在命令行中，你可以使用以下命令来编译Sass文件： bash sass input.scss output.css 三、Sass的主要特性 变量：Sass允许你定义变量，并在整个样式表中重复使用。...scss @import ‘partials/_reset’; @import ‘partials/_typography’; 四、总结 Sass作为CSS的预处理器，为我们提供了许多强大的功能和工具，...通过变量、嵌套、混合、函数、控制指令等特性，Sass极大地提高了开发效率和代码的可维护性。如果你正在寻找一种更高效的CSS编写方式，
input.scss:output.css //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录： sass --watch app/sass:public/stylesheets...SCSS (Sassy CSS) 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能，以 .scss 作为拓展名。...它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，以 .sass 作为拓展名。...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...不转换 今天遇到自定义的css变量中，使用scss变量或者函数是，不会被编译（例如rgba函数、或者一个变量编译成css后没有变化）。
、函数、混合宏...的内部定义的变量为全局变量)) 嵌套 选择器嵌套’&‘ nav { ul { header & { color: blue; } } li {...} 属性嵌套以 ’ ： ‘拼接 混合宏 分别有不带参数，带参数和复杂的混合宏： @mixin border-radius{ -webkit-border-radius: 5px; border-radius...如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 2. 如果数值被圆括号包围。 3. 如果数值是另一个数学表达式的一部分。...) ); map-get($map, key) //--- 取出，没有则返回null map-has-key($map, key) //true|false --- 判断$map中是否有指定...map) keywords($args) //--- 根据宏的参数动态创建map（自动去除参数中的$符号） 颜色函数 RGB rgba(#f00, 0.6) //--- 将颜色转成rgba
Sass和Less（预处理器） 一、了解Sass和Less 二、Sass和Less 语法 2.1 注释 2.2 语法 赋值 插值 作用域 选择器嵌套、伪类嵌套、属性嵌套（Sass） 运算 函数 混合、命名空间...它是一种无论你想怎么样使用，大都能顺利转换成 CSS 的程序语言。 Sass和Less都属于预处理器。Less文件以.less结尾，Sass文件新版的以.scss结尾，老版的以.sass结尾。...作用域 采用就近原则，在大括号里有已经创建的变量，优先使用大括号里面的变量值。...Sass作用域有顺序。 图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。...---- Sass合并 Sass合并在定义的函数中用小括号填入参数，用的是键值对的方式,用map-values()传入参数。
内置函数 sass官网提供了很多实用的内置函数，当然目前我也是在一步一步探索这些函数。目前我会将常用到的内置函数以及场景分享给大家使用。...sass中的desaturate函数就是针对饱和度操作的内置方法。...有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。...这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理. 其实就类似于js中的...rest运算符。...默认使用@at-root不传递任何时，他的作用为跳出选择器的作用域嵌套，当然可以传递参数去使用。
这里有一点清晰： 当我们在讨论Sass时，我们通常将预处理器和语言作为一个整体。我们常说，例如，“我们正在使用Sass”，或者“这是Sass mixin”。...在Sass中缩进means something。当缩进一个选择器时，这意味着它嵌套在上一个选择器中。...SCSS语法的优点 （对于启动器，它是完全兼容CSS。它意味着，你可以重命名一个“.scss”中的CSS文件并且它将just work。...当与没有经验的开发者合作时，这很重要：他们可能在一开始不了解什么是Sass的时候就能够快速开始编写。 此外，它更容易阅读，因为它实际上是有意义的。...最后的想法 这个选择取决于你，但除非你有很好的理由使用缩减语法进行编码，否则我强烈建议使用SCSS胜过Sass.不仅仅在于它更简单，而且它更方便。 我曾尝试过缩减的语法，并且喜欢它。
---- 快速使用 在VSCode中安装Live Sass Compiler插件 Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以打开实时编译。...嵌套规则 &标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。...导入SASS文件 css中的@import执行到后下载css文件,导致页面加载慢 sass中的@import在生成css的时候导入,无法额外下载 sass导入可以省略后缀 导入sass部分文件 通常在编写的...SassScript 定义的函数 p { color: hsl(0, 100%, 50%); } // 编译为: p { color: #ff0000; } 关键词参数 p { color...嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
