Sass 语法

文章目录

    • 编译
    • 变量 \$
    • 嵌套 {} > + \~
    • 导入 @import
    • 注释 // /*\* \**/
    • 混入 @mixin/@include
    • 继承 @extend
    • 数据类型
    • 运算
    • 控制 @if/@for/@each/@while
    • 函数 @function
    • 媒体查询 @media
    • 根发出 @at-root
    • 警告@warn/错误@error/调试@debug

编译

编译命令

  • 单文件转换命令 sass input.scss output.css
  • 单文件监听命令 sass --watch input.scss:output.css
  • 如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:sass --watch app/sass:public/stylesheets

编译配置项

  • –style 表示解析后的 css 是什么排版格式

    • :nested 默认

      #main {color: #fff;background-color: #000; }#main p {width: 10em; }.huge {font-size: 10em;font-weight: bold;text-decoration: underline; }
      
    • expanded

      #main {color: #fff;background-color: #000;
      }
      #main p {width: 10em;
      }.huge {font-size: 10em;font-weight: bold;text-decoration: underline;
      }
      
    • compact

      #main { color: #fff; background-color: #000; }
      #main p { width: 10em; }.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
      
    • compressed

      #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
      
  • –sourcemap 表示开启 sourcemap 调试。开启 sourcemap 调试后,会生成一个后缀名为 .css.map 文件。

变量 $

  • 普通变量 $fontSize: 12px; 只在当层块以及以下块内有用,如果内部块有同名变量则以内部为准,类似于函数的块作用域

  • 默认变量 $fontSize: 12px !default;

    • 如果之前未定义过该变量,则给该变量赋初始值;如果之前已经定义过该变量且赋过不为 null 的值,则该默认赋值将被忽略。

    • 它可被其他同名普通变量覆盖。

  • 变量引用 只在当层块以及以下块内有用,如果内部块有同名变量则以内部为准,类似于函数的块作用域

  • 变量名 用中划线和下划线连接都可以,无论用中划线还是下划线等值

    $link-color: blue;
    a {color: $link_color;
    }
    //编译后
    a {color: blue;
    }
    
  • 插值语句 #{}

    对变量取值的一种特殊用法,通过 #{} 插值语句可以在选择器或属性名中使用变量:

    $name: foo;
    $attr: border;
    p.#{$name} {#{$attr}-color: blue;
    }p.foo {border-color: blue; }// #{} 插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{} 可以避免 Sass 运行运算表达式,直接编译 CSS。
    p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
    }
    

嵌套 {} > + ~

  • 父级选择器 &
    // 一般用法
    article a {color: blue;&:hover { color: red }
    }
    /*编译后*/
    article a { color: blue }
    article a:hover { color: red }// 你想不到但也有用处的用法
    #content aside {color: red;body.ie & { color: green }
    }
    /*编译后*/
    #content aside {color: red};
    body.ie #content aside { color: green }
    
  • 选择器嵌套
    • 群组选择器
    • 子组合选择器:>
    • 同层相邻选择器:+
    • 同层选择器:~
    article {~ article { border-top: 1px dashed #ccc }> section { background: #eee }dl > {dt { color: #333 }dd { color: #555 }}nav + & { margin-top: 0 }
    }
    /*编译后*/
    article ~ article { border-top: 1px dashed #ccc }
    article > footer { background: #eee }
    article dl > dt { color: #333 }
    article dl > dd { color: #555 }
    nav + article { margin-top: 0 }
    
  • 属性嵌套 属性前缀相同可以将属性提取出来进行属性嵌套
    // 一般属性嵌套
    nav {border: {style: solid;width: 1px;color: #ccc;}
    }
    /*编译后*/
    nav {border-style: solid;border-width: 1px;border-color: #ccc;
    }// 你想不到但又很实用的用法——属性嵌套+属性缩写
    nav {border: 1px solid #ccc {left: 0px;right: 0px;}
    }
    /*编译后*/
    nav {border: 1px solid #ccc;border-left: 0px;border-right: 0px;
    }
    

导入 @import

  • css @import VS sass @import

    原生 css 的@import 可以导入外部 .css 样式文件,但只有执行到 @import时,浏览器才会去下载其他 css 文件,这导致页面加载起来特别慢。所以用 sass 的 @import 去导入外部样式文件,在生成 css 文件时就把相关文件导入进来。

    如何区分 @import 是 css 还是 sass 的导入功能呢?只有以下三种情况,sass 文件中的 @import 是以原生 css 的行为做导入操作。

    • 被导入文件的名字以 .css 结尾;
    • 被导入文件的名字是一个 URL 地址(比如 http://www.sass.hk/css/css.css),由此可用谷歌字体 API 提供的相应服务;
    • 被导入文件的名字是 CSS 的 url() 值。
  • 单文件导入 @import "test2.scss";

    可省略后缀,即支持 .scss、.sass 格式,但不能用 @import 导入 .css 文件,它会认为是想用原生 css @import 导入。但因为 sass 兼容原生 css,我们可以将 .css 改为 .scss,这样就以 sass 的方式导入样式文件。

  • 多文件导入 @import "test2.scss", "test3.scss";

  • 部分文件 Partials 导入,不希望被编译为 css,Partials 文件命名需要 _ 开头,但引入的时候不需要 _。

  • 嵌套导入

    #main {// 生成的结果跟你直接在 #main 选择器内写_test2.scss文件的内容完全一样。// 注意部分导入的样式文件命名要以 _ 开头,但引入的时候可以省略 _ 符号@import "test2.scss";
    }
    

注释 // /* */

  • 多行注释 /* */,编译到 css 文件

    如果写在原生 css 不支持的地方,识别不了,也不会编译到 css 文件中。

  • 单行注释 // 不会被编译到 css 文件

混入 @mixin/@include

如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过 sass 的混合器实现大段样式的重用。

  • 定义混入

    • 无参 @mixin large-tex{...}

    • 有参 @mixin large-text($color, $width:10px) {...}

  • 使用混入

    • 无参@include large-text
    • 有参 只传 value,要和形参位置严格对应 @include large-text('red', 20px) ;使用name:value形式传参不限制传参位置@include large-text($width:20px);可以给参数设置默认值

继承 @extend

@extend 类名继承其他样式类

//通过选择器继承继承样式
.error {border: 1px solid red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}// 一般你以为继承到的
.seriousError {border: 1px solid red;background-color: #fdd;border-width: 3px;
}// 除了以上从 .error 自身继承到的,其它与 .error 相关联的组合样式都被 .seriousError 继承
.error a{  // 应用到 .seriousError acolor: red;font-weight: 100;
}
h1.error { // 应用到 hl.seriousErrorfont-size: 1.2rem;
}

关于 @extend 有两个要点你应该知道。

  • 跟混合器相比,继承生成的 css 代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的 css 体积更小。如果你非常关心你站点的速度,请牢记这一点。

    所以最佳实践是你完全可以放心地继承有后代选择器修饰规则的选择器,不管后代选择器多长,但有一个前提就是,不要用后代选择器去继承。因为如果用后代选择器去继承有后代选择器的 css 规则,会让情况变得很复杂。

  • 继承遵从 css 层叠的规则。当两个不同的 css 规则应用到同一个 html 元素上时,并且这两个不同的 css 规则对同一属性的修饰存在不同的值,css 层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。

数据类型

  • 字符串,有引号字符串与无引号字符串,“foo”, ‘bar’, baz

    // 需要注意的是索引从 1 开始
    // https://www.runoob.com/sass/sass-string-func.html
    quote(string) - 给字符串添加引号。
    unquote(string)	- 移除字符串的引号
    str-index(string, substring) - 返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串,则返回 null。
    str-insert(string, insert, index) - 在字符串 string 中 index 位置插入 insert。
    str-length(string) - 返回字符串的长度。
    str-slice(string, start, end) - 从 string 中截取子字符串,通过 start-at 和 end-at 设置始末位置,未指定结束索引值则默认截取到字符串末尾。包含起始和截止索引位置字符。
    to-lower-case(string) - 将字符串转成小写
    to-upper-case(string) - 将字符串转成大写
    unique-id()	- 返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
    
  • 数字,1, 2, 13, 10px

    abs(number)	- 返回一个数值的绝对值。
    ceil(number) - 向上取整
    floor(number) - 向下取整
    comparable(num1, num2) - 返回一个布尔值,判断 num1 与 num2 是否可以进行比较
    max(number...) - 返回最大值
    min(number...) - 返回最小值
    percentage(number) - 将数字转化为百分比的表达形式。
    random() - 返回 0-1 区间内的小数,
    random(number) - 返回 1 至 number 之间的整数,包括 1 和 limit。
    round(number) - 返回最接近该数的一个整数,四舍五入。
    
  • 列表 ,list,用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif

    // Sass 列表是不可变的,因此在处理列表时,返回的是一个新的列表,而不是在原有的列表上进行修改。
    // 列表的起始索引值为 1,记住不是 0。
    append($list, $value, [$separator]) - 将单个值 $value 添加到列表尾部。$separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。(space-空格,comma-逗号,slash-斜杠)
    index($list, $val) - 元素的索引位置,从1开始
    is-bracketed($list) - 判断列表中是否有中括号
    join($list1, $list2, [$separator, $bracketed]) - 合并两列表,将列表 list2 添加到列表 list1 的末尾。$separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。 $bracketed 默认会自动侦测是否有中括号,可以设置为 true 或 false。
    length($list) - 数组长度
    list-separator($list) - 返回一列表的分隔符类型。可以是空格或逗号。
    nth($list, $index) - 获取指定索引位置的值
    set-nth($list, $index, $val) - 设置指定位置的值
    zip($lists) - 将多个列表按照以相同索引值为一组,重新组成一个新的多维度列表。
    
  • 映射,maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)

    // Sass Map 是不可变的,因此在处理 Map 对象时,返回的是一个新的 Map 对象,而不是在原有的 Map 对象上进行修改。
    map-get($map, $key, [$keys...]) - 通过key值获取value;支持传入多个key值获取深层的值
    map-has-key($map, $key, [$keys...]) - 判断是否包含某个键;支持深层key
    map-keys($map) - 获取所有键的列表
    map-values($map) - 获取所有值的列表
    map-remove($map, $keys...) - 移除一个或多个key
    map-merge($map1, $map2) - 浅层次合并两个map,相同的属性取$map2的值
    
  • 颜色,blue, #04a3f9, rgba(255,0,0,0.5)

    rgb(red, green, blue) - 创建一个 Red-Green-Blue (RGB) 色。
    rgba(red, green, blue, alpha) - 根据红、绿、蓝和透明度值创建一个颜色。
    hsl(hue, saturation, lightness) - 通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色。
    hsla(hue, saturation, lightness, alpha) - 通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色。
    grayscale(color) - 将一个颜色变成灰色,相当于 desaturate( color,100%)complement(color) - 返回一个补充色,相当于adjust-hue($color,180deg)invert(color, weight) - 返回一个反相色,红、绿、蓝色值倒过来,而透明度不变。red(color) - 从一个颜色中获取其中红色值(0-255)。
    green(color) - 从一个颜色中获取其中绿色值(0-255)。
    blue(color) - 从一个颜色中获取其中蓝色值(0-255)。
    hue(color) - 返回颜色在 HSL 色值中的角度值 (0deg - 255deg)saturation(color) - 获取一个颜色的饱和度值(0% - 100%)lightness(color) - 获取一个颜色的亮度值(0% - 100%)alpha(color)	
    opacity(color) - 获取颜色透明度值(0-1)
  • 空值,null

  • 选择器函数 selector

    is-superselector(super, sub) - 比较两个选择器匹配的范围,即判断 super 选择器是否包含了 sub 选择器所匹配的范围,是的话返回 true,否则返回 false。
    selector-append(selectors) - 将第二个 (也可以有多个) 添加到第一个选择器的后面。 selector.
    selector-extend(selector, extendee, extender)	
    selector-nest(selectors) - 返回一个新的选择器,该选择器通过提供的列表选择器生成一个嵌套的列表。
    selector-parse(selector) - 将字符串的选择符 selector 转换成选择器队列。
    selector-replace(selector, original, replacement) - 给定一个选择器,用replacement 替换 original 后返回一个新的选择器队列。
    selector-unify(selector1, selector2) - 将两组选择器合成一个复合选择器。如两个选择器无法合成,则返回 null 值。
    simple-selectors(selectors) - 将合成选择器拆为单个选择器。	
    
  • Introspection 函数

    // Sass Introspection 函数比较少用于构建样式表,一般用于代码的调试上。
    call(function, arguments...) - 函数的动态调用,即调用函数 function 参数为 arguments,并返回结果。
    content-exists() - 查看当前的混入是否传递 @content 块。
    feature-exists(feature) - 检查当前的 Sass 实现是否支持该特性。
    function-exists(functionname) - 检测指定的函数是否存在
    get-function(functionname, css: false) - 返回指定函数。如果 css 为 true,则返回纯 CSS 函数。
    global-variable-exists(variablename) - 检测某个全局变量是否定义。
    inspect(value) - 返回一个字符串的表示形式,value 是一个 sass 表达式。
    mixin-exists(mixinname) - 检测指定混入 (mixinname) 是否存在。
    type-of(value) - 返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist。
    unit(number) - 返回传入数字的单位(或复合单位)。
    unitless(number) - 返回一个布尔值,判断传入的数字是否带有单位。
    variable-exists(variablename) - 判断变量是否在当前的作用域下。
    

运算

  • 字符串运算 +
  • 数字运算 +, -, *, /, %
  • 比较运算 <, >, <=, >=
  • 逻辑运算 and or 以及 not
  • 颜色值运算 #010203 + #040506,则计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09,结果为#050709
  • 圆括号 ()

控制 @if/@for/@each/@while

  • @if:条件控制指令
  • @for:循环指令 包含 end @for $var from <start> through <end>,或者 不包含 end @for $var from <start> to <end>
  • @each:循环指令 @each $var in <list>
  • @while:循环指令

函数 @function

  • 内置函数

  • 自定义函数

    @function 函数名称(参数列表){// 数据处理
    }
    

媒体查询 @media

@media支持嵌套,编译到最外层

根发出 @at-root

@at-root 将样式编译到根层级。

警告@warn/错误@error/调试@debug

  • 警告 @warn message;

    警告信息,警告信息一般会在执行 scss 程序生成 css 时触发,所以出现在命令行中。

  • 错误 @error message;

    错误信息,错误信息直接显示在编译的 css 文件中。

  • 调试@debug 语句

    将 SassScript 表达式的值打印到标准错误输出流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/42182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学基础 -- 反函数

反函数技术文档 反函数的定义 反函数&#xff08;inverse function&#xff09;是指一种将函数的输出反过来作为输入&#xff0c;从而恢复原来输入的函数。具体来说&#xff0c;如果有一个函数 f f f&#xff0c;它把一个值 x x x 映射到一个值 y y y&#xff0c;即 f ( …

68.WEB渗透测试-信息收集- WAF、框架组件识别(8)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;67.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;7&#xff09; 右边这些是waf的…

Mean teacher are better role models-论文笔记

论文笔记 资料 1.代码地址 2.论文地址 https://arxiv.org/pdf/1703.01780 3.数据集地址 CIFAR-10 https://www.cs.utoronto.ca/~kriz/cifar.html 论文摘要的翻译 最近提出的Temporal Ensembling方法在几个半监督学习基准中取得了最先进的结果。它维护每个训练样本的标签…

PCIe驱动开发(1)— 开发环境搭建

PCIe驱动开发&#xff08;1&#xff09;— 开发环境搭建 一、前言 二、Ubuntu安装 参考: VMware下Ubuntu18.04虚拟机的安装 三、QEMU安装 下载网站&#xff1a; https://download.qemu.org 下载文件&#xff1a;qemu-4.1.0-rc5.tar.xz 使用如下命令解压&#xff1a; tar …

opencv 设置超时时间

经常爬视频数据&#xff0c;然后用opencv做成图片 因此设置超时时间很重要 cap.set(cv2.CAP_PROP_FPS, timeout_ms) for idx, row in data.iterrows(): if idx < 400: continue try: # 打开视频文件 timeout_ms 5000 cap cv2.VideoCapture(row[PLAY_URL]) cap.set(cv2.C…

Linux下使用libiw进行无线信号扫描的实例

打开电脑连接wifi是一件很平常的事情,但这些事情通常都是操作系统下的wifi管理程序替我们完成的,如何在程序中扫描wifi信号其实资料并不多,前面已经有两篇文章介绍了如何使用ioctl()扫描wifi信号,但其实在Linux下有一个简单的库对这些ioctl()的操作进行了封装,这个库就是l…

深入追踪:IPython 中 %tb 命令的异常追踪栈使用指南

深入追踪&#xff1a;IPython 中 %tb 命令的异常追踪栈使用指南 在 IPython 的强大功能中&#xff0c;%tb 命令是一个调试工具&#xff0c;用于在出现异常时查看详细的异常追踪栈信息。这对于开发者来说是一个不可或缺的功能&#xff0c;因为它提供了对错误发生上下文的深入了…

Unity 中,常用的 UnityEngine.Events 中的几个重要的事件处理函数

在 Unity 中&#xff0c;常用的 UnityEngine.Events 中的几个重要的事件处理函数包括&#xff1a; UnityEvent UnityEvent 是 Unity 提供的一种事件系统&#xff0c;可以用来实现脚本与场景中的对象之间的互动。它可以用来定义和响应事件&#xff0c;如按钮点击、物体碰撞等。示…

GPT-5或重塑我们的工作与生活

引言 在人工智能发展的浪潮中&#xff0c;每一次技术的革新都如同潮水般涌来&#xff0c;带来前所未有的机遇与挑战。当新一代大语言模型GPT-5即将登场的消息传来&#xff0c;我们不禁要问&#xff1a;它将如何重塑我们的工作和日常生活&#xff1f;又将开启哪些崭新的应用场景…

故障模式与影响分析(FMEA)的概念

故障模式与影响分析&#xff08;FMEA&#xff09;的概念 故障模式与影响分析&#xff08;Failure Mode and Effects Analysis&#xff0c;FMEA&#xff09;是一种系统性评估方法&#xff0c;用于识别产品设计或过程中可能发生的潜在故障模式&#xff0c;以及这些故障模式对系统…

制作爬取4399游戏名称软件

def 爬取4399(): #发送请求并且拿到源代码 import requests 链接https://www.4399.com/ #网站链接 请求头{User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0} #构造请求头用于爬取网站源代码使用 网站源代码…

MySQL远程登录

root是超级管理员&#xff0c;默认情况下&#xff0c;root不能作为远程登录的用户名&#xff0c;远程登录前&#xff0c;需要将登录的数据库在本地登录&#xff0c;修改权限&#xff0c;输入&#xff1a; update user set host & where user root ; 回车键&#xff0c…

clickhouse高可用可拓展部署

clickhouse高可用&可拓展部署 1.部署架构 1.1高可用架构 1.2硬件资源 部署服务 节点名称 节点ip 核数 内存 磁盘 zookeeper zk-01 / 4c 8G 100G zk-02 / 4c 8G 100G zk-03 / 4c 8G 100G clikehouse ck-01 / 32c 128G 2T ck-02 / 32c 128G 2T ck-03 / 32c 128G 2T ck-04 /…

[Qt] 控件的QSizePolicy属性选项

在Qt中&#xff0c;QSizePolicy是一个非常重要的枚举类&#xff0c;它定义了控件&#xff08;widgets&#xff09;在布局管理&#xff08;layout management&#xff09;中的大小调整策略。这些策略决定了当控件的父布局或窗口大小发生变化时&#xff0c;控件应该如何调整自身的…

java wait, notify, notifyAll三个方法

wait(), notify(), 和 notifyAll() 是 Java 中用于线程间通信和同步的方法&#xff0c;它们都是 Object 类中的方法&#xff0c;而非 Thread 类的方法。这些方法通常与 synchronized 关键字一起使用&#xff0c;用于实现线程之间的协作和互斥访问共享资源。 关于生产者-消…

PsQuerySystemDllInfo逆向

typedef struct _SYSTEM_DLL_ENTRY {ULONG64 type;UNICODE_STRING FullName;PVOID ImageBase;PWCHAR BaseName;PWCHAR StaticUnicodeBuffer; }SYSTEM_DLL_ENTRY, * PSYSTEM_DLL_ENTRY; 返回值为上面的结构体指针 验证 type: fullname inagebase: pwchar basename PWCHAR …

C# 工厂模式(Factory Pattern)

工厂模式用于创建对象而不将具体类的代码与客户端代码混合在一起&#xff0c;从而使一个类的实例化延迟到其子类。 示例代码&#xff1a; // 抽象产品 public interface IProduct { void Use(); } // 具体产品A public class ConcreteProductA : IProduct { pub…

Linux常用面试题

系统部分 1、在linux系统中&#xff0c;获取命令帮助的方法有哪些&#xff1f; man &#xff08;查看手册页&#xff09; help&#xff08;查看内部命令&#xff09; --help&#xff08;查看外部命令&#xff09; 2、列举find命令的用法&#xff1f;&#xff08…

QTableWidget表头添加全选框

前言 QTableWidget表头不能直接设置复选框&#xff0c;setCheckState不适用&#xff0c;所以直接使用设置图片的方法最方便快捷&#xff0c;准备两个图片&#xff0c;分别为选中状态和未选中状态。 1.设置复选框列 设置第一列为复选框列&#xff0c;其他列正常显示内容&…

大模型实战:RAG的应用探索

自chatgpt卷过来&#xff0c;我们‘打开’了视野&#xff0c;发现‘什么都想要’成为了可能。但是随着国内开源大模型的开放&#xff0c;越来越多人觉得通用LLM的价值很低&#xff08;可能是商业利益的驱使&#xff09;。大家对技术的追逐有变成了应用变现的需求。好吧&#xf…