首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Sass 基础(六)

if($condition,$if-true,$if-false)     上面表达式的意思是当 $condition 条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。...:     map-get($map,$key) 根据给定的key值,返回map 中相关的值     map-merge($map1,$map2):将两个 map 合并成一个新的map     ...Sass Maps的函数-map-get($map,$key)     map-get($map,$key) 函数的作用是根据$key参数,返回$key 在$map 中对应的value     如果...  前面的示例,当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值   但对于开发人员,并看不到任何提示信息。...'";       }         @return map-get($social-color,$color);     }     上面代码中最不同之处,我们使 用map-key s将

771100

Sass速通(一):变量与运算

Sass 是一种 CSS 的预编译语言,预编译指在使用前需要先把它编译为 CSS,然后再交给浏览器执行。 Sass 中的变量提供了数据复用的方式,声明的变量可以用于选择器、属性和属性值等各种地方。...以下几种情况, / 将被认为是除法运算符: 表达式中包含变量或函数返回表达式被圆括号包裹 表达式为复合表达式的一部分 $width: 1000px; p { // 纯CSS,不作除法...; } 颜色运算 三色道 如果只有三色道的颜色参与计算,在计算时,会将红绿蓝三色道拆开分开计算,然后再组合在一起。...map-get map-get(map, key) 用于获取指定键对应的值。...> $map: (width: 1px, color: red, style: solid); > map-get($map, width); > # 1px > map-get($map, color

1.8K30
您找到你想要的搜索结果了吗?
是的
没有找到

Sass-学习笔记【进阶篇】

@while循环 @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。...语法: @each $var in $var : 一个变量名, 一个列表,返回一个列表值,变量$var要在其中循环遍历, 该SassScript表达式返回一个符合$var条件的列表值...2017-07-04  14:41:18  6.Maps函数 map-get($map,$key);根据给定的key值,返回 map 中相关的值 map-merge($map1,$map2);将两个 map...A).map-get($map,$key) 根据 $key 参数,返回 $key 在 $map 中对应的 value 值。 如果 $key 不存在 $map中,将返回 null 值。...可实际上任何颜色的亮度值都在 0~100% 之间,如此一来,Sass 的 lighten() 和 darken() 函数又将会如何处理呢? 上面的例子说明了一切问题。

3.7K20

Sass-学习笔记【进阶篇】

@while循环 @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。...语法: @each $var in $var : 一个变量名, 一个列表,返回一个列表值,变量$var要在其中循环遍历, 该SassScript表达式返回一个符合$var条件的列表值...2017-07-04  14:41:18  6.Maps函数 map-get($map,$key);根据给定的key值,返回 map 中相关的值 map-merge($map1,$map2);将两个 map...A).map-get($map,$key) 根据 $key 参数,返回 $key 在 $map 中对应的 value 值。 如果 $key 不存在 $map中,将返回 null 值。...可实际上任何颜色的亮度值都在 0~100% 之间,如此一来,Sass 的 lighten() 和 darken() 函数又将会如何处理呢? 上面的例子说明了一切问题。

4.3K80

DarkMode(5):深色模式不同实现方案切换

sass自定义函数转 sass预处理 在《DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode》与《DarkMode(3):深色模式解决方案——颜色反转与函数 》,如果使用...body[data-theme=#{$theme-name}] & {       @content;     }   } } @function themed($key) {   @return map-get...不过推荐使用正则表达式的方式,去替换 正对第一个函数,替换的正则表达式如下:\@include themeify \{\n([\s\w\:\-\"\(\)\;\$\!]...变量主题输出切换为css变量主题输出 如果单纯sass变量输出两套主题,切换主题样式,需要刷新页面。...each $color in $color-variables {      #{$var-element}#{nth($color, 1)}: #{nth($color, 2)};        } } 如何在把读取

86910

Sass控制命令及函数知识整理

@while循环 @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。...语法: @each $var in $var : 一个变量名, 一个列表,返回一个列表值,变量$var要在其中循环遍历, 该SassScript表达式返回一个符合$var条件的列表值...2017-07-04  14:41:18  6.Maps函数 map-get($map,$key);根据给定的key值,返回 map 中相关的值 map-merge($map1,$map2);将两个 map...A).map-get($map,$key) 根据 $key 参数,返回 $key 在 $map 中对应的 value 值。 如果 $key 不存在 $map中,将返回 null 值。...可实际上任何颜色的亮度值都在 0~100% 之间,如此一来,Sass 的 lighten() 和 darken() 函数又将会如何处理呢? 上面的例子说明了一切问题。

3.3K60

DarkMode(3):sass函数实实现深色模式操作

body[data-theme=#{$theme-name}] & {       @content;     }   } } @function themed($key) {   @return map-get...》 sass颜色函数实现深色模式 在定义sass变量时,我们会有基准尺寸,如: $h1-font-size:                $font-size-base * 2.5 !...:从一个颜色中获取亮度(lightness)值; grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%); complement($color):返回一个补充色...其中指定的比例会包括在返回的颜色中。默认的的比例是50%,这意味着两个颜色各占一半,如果指定的比例是25%,这意味着第一个颜色所占比例为25%,第二个颜色所占比例为75%。...其使用语法如下: mix($color-1,$color-2,$weight):$color-1和$color-2指的是你需要合并的颜色,颜色可以是任何表达式,也可以是颜色变量。

1.2K10

CSS预处理器之SCSS

但大多数情况下,这样使用属性值可能还不如直接使用变量方便,但是使用 #{} 可以避免 Sass 运行运算表达式,直接编译 CSS。 $name: foo; $attr: border; p....尽量不使用合并选择器列,因为如果凭个人推理的话,会出现排列组合的情况,所以 SASS 编译器只会保留有用的组合形式,但依旧会存在排列组合的情况,有可能会留下隐患。...@if 条件语句 当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码 @if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。...@while 循环语句 表达式:@while expression @while 指令重复输出格式直到表达式返回结果为 false。...映射函数 函数名和参数类型 函数作用 map-get($map, $key) 获取$map中$key 对应的$value map-merge($map1, $map2) 合并$map1和$map2,返回一个新

3.8K10

sass 概要

好在有了sass,写css不再死板。sass对css的增强如下: 宏定义 宏定义的优点在于一处定义,多处使用,需要修改的时候只需要修改定义的地方即可。...虽然sass没有明确的说明,但其实以下几种语法与C语言中的宏定义非常类似: 变量 sass中的变量适用于替换css中参数的值。...= : 判断两个值是否相等/不相等 + - * / % >= and or not + - / 可用于字符串拼接 () 用于优先级设定 &父元素选择器 #{} 可以将sass表达式插入到...prefixes-for-browsers($browsers) { $prefixes: (); @each $browser in $browsers { $prefixes: append($prefixes, map-get...对css所做的一些增强,阐明了sass如何让css从简单的平铺式的书写方式演变成一种"编程语言",希望读者可以在自己的前端项目中试一试sass,相信它会极大地提升你的开发效率。

90910

SCSS 学习笔记 和 vscode下载live sass compiler插件配置

以下三种情况 / 将被视为除法运算符号: 如果值或值的一部分,是变量或者函数的返回值 如果值被圆括号包裹 如果值是算数表达式的一部分 注意:如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到...例如:lighten() 与 darken()函数可用于调亮或调暗颜色,opacify()函数使颜色透明度减少,transparentize()函数使颜色透明度增加,mix()函数可用来混合两种颜色。...2.10.5 Map函数 Map函数操作Map,map-get() 根据键值获取map中的对应值,map-merge() 来将两个map合并成一个新的map,map-values() 映射中的所有值...2.11.4 @while 指令 @while 指令重复输出格式直到表达式返回结果为 false。这样实现比 @for 更复杂的循环。...2.14 SCSS @use 的使用 从其他 SCSS 样式表加载mixin,function和变量,并将来自多个样式表的CSS组合在一起,@use加载的样式表被称为“模块”,多次引入只包含一次

30710

如何使用SASS编写可重用的CSS

这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的,而不是覆盖代码(这是大多数开发人员的定制方法)。理解Sass可以更好地理解源代码级别的工具。...在本文中,我们将重点讨论为什么预处理程序很重要,并特别强调SASS及其将规则组合在一起的能力。使用Sass为设计现代web组件提供了一种更合理的方法。...有很多内置的 Sass 函数可供我们使用,查看文档了解更多信息。 这里列出了一些常用的函数: lighten(color, amount):使颜色更浅。...我们也可以定义自己的 Sass 函数,要实现函数的声明和返回内容我们需要使用function和return两个指令,类似于其他语言中的关键字。...如果使用数字作为上述示例的条件,同样会返回测试成功的值: .firstClass { @include test(1); } @if @if 后跟一个表达式,如果表达式的结果为 true,则返回特定的样式

7.6K20

SASS用法指南

unit($number):返回一个值的单位; 碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算: 但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm...他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($condition,$if-true,$if-false) 上面表达式的意思是当 $condition 条件成立时,返回的值为...if(true,1px,2px) 1px if(false,1px,2px) 2px 颜色函数 RGB颜色函数简介 RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green...color):获取颜色透明度值; rgba($color, $alpha):改变颜色的透明度值; opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明...; transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明。

1.3K20

给初学者的Gulp教程(译)

编译像Sass或者LESS一样的预处理器 优化资源文件,像CSS,JavaScript和图片等 你也将学习如何使用容易理解和执行的命令行,将不同的任务捆绑在一起。...; }); 我们可以在命令行中通过gulp hello来运行这个任务 $gulp hello 命令行将会返回一个日志,打印出Hello Zell! ?...我们可以在Node globs的帮助下完成(globs参数是文件匹配模式,类似正则表达式,用来匹配文件路径包括文件名)。 供参考:Gulp-sass使用LibSass来将Sass转换成CSS。...它就像正则表达式一样,但是只用来表示文件路径。 当你使用glob,计算机检查文件名和路径以特定的特征。如果特征存在,文件就会被匹配。 大部分Gulp工作流倾向于只要求4个不同的匹配模式。...现在让我们把所有任务都组合到一起吧。 组合Gulp任务 让我们总结一下我们做的吧。到目前为止,我们创建了两个不同Gulp任务集。

4.3K20

20个为前端开发者准备的文档和指南4

Regulex(JavaScript正则表达式可视化工具) 它是一个客户端工具,一个JavaScript正则表达式可视化工具,该工具有一个精确的错误提示器,来告诉你在你的正则表达式里有某个语法错误。...Mastering the :nth-child(精通:nth-child) 它是只有一页的站点,可以帮助你理解如何使用多种多样有用但是通常又很复杂的基于nth-child的选择器组合。 4....CodeFightClub(编程竞争俱乐部) “它是由Andrew Hathaway创建的一个项目,它的目标是帮助同样的开发者学习如何尽他们所能来以最好、最有效和最优的方式来编写他们的代码。...Sass Guidelines(Sas指南) 它来自Sass大师Hugo Giraudel,“一个固执己见的样式指南,用来编写合理的,可维持的和可扩展的Sass代码。”...Sass Compatibility(Sass 兼容性) “它报告了不同Sass引擎之间的不兼容。” 15.

849100

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券