Sass语法学习

2023-11-10

1、编译监控

自动监控把sass编译成css文件,命令行

sass --watch sass/basic.scss:css/basic.css 

在监控的sass后面,,可以为 sass 生成 css 样式指定生成的格式,默认是nested型;

--style nested|compact|compressed|expended

通过 --style nested( 嵌套 - 默认 )|compact( 紧促型 )|compressed( 压缩 )|expended( 扩展 ) 命令,可以为 sass 生成 css 样式指定生成的格式

2、合成文件

@improt

     在sass中,使用@improt可以把多个不同的sass文件合成一个css文件,在合成的sass中有两种方式,

第一种:@import "demo2","demo3","demo4";

第二种:@import "dem2";@import "demo3";@import "demo4"

第三种:在一个sass文件中,引入另一个sass文件;

3、变量

sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

3.1默认变量

sass的默认变量仅需要在值后面加上!default即可。

sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可;

特殊变量

一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

3.2、多值变量

多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

3.3、多值变量

多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

3.3.1、list

list数据可通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list),join($list1,$list2,[$separator]),append($list,$value,[$separator])等,具体可参考sass Functions(搜索List Functions即可)

定义

//一维数据

$px: 5px 10px 20px 30px;

//二维数据,相当于js中的二维数组

$px: 5px 10px, 20px 30px;

$px: (5px 10px) (20px 30px);

3.3.2、map

map数据以key和value成对出现,其中value又可以是list。格式为:$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2),map-keys($map),map-values($map)等,具体可参考sass Functions(搜索Map Functions即可)

定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

全局变量

在变量值后面加上!global即为全局变量。这个目前还用不上,不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病,所以才有了这个全局变量(现在已经能用上了)。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)(实际测试sass是有局部变量的);

4、嵌套(Nesting)

sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

4.1、选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。

在选择器嵌套中,可以使用&表示父元素选择器

4.2、属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头。

/sass style

//-------------------------------

.fakeshadow {

  border: {

    style: solid;

    left: {

      width: 4px;

      color: #888;

    }

    right: {

      width: 2px;

      color: #ccc;

    }

  }

}

 

//css style

//-------------------------------

.fakeshadow {

  border-style: solid;

  border-left-width: 4px;

  border-left-color: #888;

  border-right-width: 2px;

  border-right-color: #ccc; 

}

当然这只是个属性嵌套的例子,如果实际这样使用,那估计得疯掉。

4.3、@at-root

sass3.3.0中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。

普通跳出嵌套

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Sass语法学习 的相关文章

  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • 如何隐藏按钮元素的值?

    如何隐藏按钮的值 同时仍然显示按钮 我使用的颜色 透明 但这行不通 我想隐藏按钮的值 但不是所有按钮的值 我需要将 value 属性保留在按钮中 我只是不想让它被看见 如果您只想显示按钮而不显示任何文本 请将值设置为空字符串 然后手动设置按
  • 添加额外的字形到引导程序

    亲爱的设计师 开发人员同事 我为我的 bootstrap 网站创建了 8 个额外的字形图标 将它们上传到 icomoon 并下载为字体 这一切都很完美 我可以将我的字体添加到我的 CSS 中并在 HTML 中使用它 没有任何问题 但我想使用
  • 行高如何使文本垂直居中?

    我试图理解为什么line heightCSS 属性将文本垂直放置在此按钮的中间 btn order width 220px height 58px font size 24px padding 0 text align center ver
  • 如何像facebook和twitter一样显示帖子更新时间?

    我正在制作一个通知平台 而不是显示通知到来的时间 我想显示自通知到达以来经过的时间 就像在 Twitter 和 Facebook 上发生的那样 他们显示 32m 1 小时前等 我想用JavaScript Java来实现这段代码 任何帮助将非
  • CSS:如何在“div”内垂直对齐“标签”和“输入”?

    考虑以下代码 http jsfiddle net s2qBw 3 HTML div div
  • 具有固定高度、自动宽度并保持比例的图像

    我有一个反应灵敏的ul列表 其中每个li是 50 ul宽度 每一个li 我有一个图像 我想要固定的高度和 100 的宽度 保持图像的比例 例如通过缩放 请问我该怎么做 ul width 100 li width 50 float left
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • 使用百分比 (%) 时如何计算填充?

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA
  • 如何使用 HTML CSS JS 创建滑块/切换来更改屏幕上的字体大小 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 is there any way I can make this gt 所以我想制作一个滑块 切换器 用户可以拖动 滑动它来改变不同的
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • 我无法注入带有“!important”规则的样式[重复]

    这个问题在这里已经有答案了 我尝试使用以下代码注入样式 document body style color green important Per CSS 级联引用 http www w3 org TR CSS2 cascade html
  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s
  • 动态检测屏幕高度和屏幕宽度,以精简图像的高度和宽度

    我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co
  • 当td内容太宽时,表格溢出父div

    我准备了一个 JSFiddle 来解释 向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错 但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度 整个表
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐

  • java.io.FileNotFoundException: class path resource [***] cannot be resolved to URL

    SpringBoot 集成FreeMarker 时出现如下错误信息 java io FileNotFoundException class path resource templates cannot be resolved to URL
  • Linux网络编程一步一步学 - 目录(汇总)zhuan

    非常好的关于Linux网络编程的文章 我也是无意中在别人的博客里发现的 在网上搜了一下 这类的文章总共还有很多篇 最后我找到了原作者的姓名 周立发 以及作者的博客空间 本人坚决支持原创 在此将其文章进行了汇总 并且空间首页加入了他的博客链接
  • 泛型方法使用

    Java中关于泛型方法中类型变量的确定 首先 在我们使用泛型的时候我们要显示的告诉编译器所要使用的具体类型 比如 新建了一个Integer类型的ArrayList 并在 lt gt 中指明了类型 ArrayList
  • 【GIN】上下文 bind的几种方法

    1 Bind var req vo RegisterRequest ctx Bind req It writes a 400 error and sets Content Type header text plain in the resp
  • VM虚拟机中的web服务内网穿透的设置,虚拟机连接主机的mysql(主机win10 虚拟机win10)

    前言 由于我的主机里环境弄得乱七八糟 无法正常使用阿帕奇 我又不想重置电脑 所以就想在虚拟机里配置环境 结果我的虚拟机无法安装mysql 于是就用虚拟机访问主机的mysql 我在虚拟机里部署的Flask项目 然后WEB服务器用的是阿帕奇2
  • 对于全连接层的理解 全连接层的推导

    全连接层的推导 全连接层的每一个结点都与上一层的所有结点相连 用来把前边提取到的特征综合起来 由于其全相连的特性 一般全连接层的参数也是最多的 全连接层的前向计算 下图中连线最密集的2个地方就是全连接层 这很明显的可以看出全连接层的参数的确
  • 等响度曲线_什么是“响度”

    转自 https blog csdn net weixin 36225384 article details 112220422 原文 https www tonmeister ca wordpress 2014 06 07 bo tech
  • 正则表达式 匹配美元等多种货币符号的超简单方法

    p Sc 带小数点也不怕 Symbol Meaning p a character with the xx property Sc Currency symbol 方法二 暴力匹配 正则表达式 xA2 xA5 u058F u060B u09
  • QT开发之QString转换之路

    编程中少不了字符串的使用 QT提供了QString变量类型 字符串链表可直接使用QStringList进行变量定义和声明 那如果使用了其他表示字符串的变量应该怎么相互转化呢 这里就列举几个常用的几个类型之间的转化 错误之处 还望指出批评 1
  • 蓝桥杯2023模拟赛 滑行题目编号2414

    问题描述 小蓝准备在一个空旷的场地里面滑行 这个场地的高度不一 小蓝用一个 n 行 m 列的矩阵来表示场地 矩阵中的数值表示场地的高度 如果小蓝在某个位置 而他上 下 左 右中有一个位置的高度 严格 低于当前的高度 小蓝就可以滑过去 滑动距
  • 当你在浏览器中输入了网址访问时产生了哪些技术步骤

    当你在浏览器中输入了网址访问时产生了哪些技术步骤 前段时间在知乎上了看一些网络方面的知识 刚好小编自己也是从事这一块的相关工作由对网络方面有一定的了解 今天我们来讲讲 当你在浏览器中输入本站域名并回车后 这背后到底发生来什么事情 因平台原因
  • 如何让IE8及以下版本浏览器支持HTML5新的定义元素?

    如何让IE8及以下版本浏览器支持HTML5新的定义元素 1 我们都知道HTML5在HTML4的基础上 增加了很多新的特性和元素 其中也包括定义元素 比如 header section footer aside nav 但是这些元素在低版本的
  • 记一次个别网站不能访问的问题

    这是天猫的网站 之前我突然电脑不能访问这些网站 我试了很多种办法 都是失败 1 修改用户名 2 修改本地策略 3 后来又把浏览器 包括ie全部设置清除 4 还去选了下自动获取dns 最后我用cmd gt net int ip reset g
  • RuntimeError: CUDA error: CUBLAS_STATUS_EXECUTION_FAILED when calling `cublasSgemm( handle, opa, opb

    今天跑一个项目时遇到了如下问题 RuntimeError CUDA error CUBLAS STATUS EXECUTION FAILED when calling cublasSgemm handle opa opb m n k alp
  • 【GUI】LVGL8内存泄漏分析

    LVGL版本 V8 0 2 平台 ESP32S3 在调试过程中 发现有两个界面 在重复退出再进入时内存会不断增加的吃内存现象 然后做了分析和研究 1 样式style吃内存 在主页面 进入simple页面 再退出到主页面 再次进入simple
  • eNSP搭建USG6000V防火墙教程-web

    eNSP搭建USG6000V防火墙教程 web 1 先注册设备 很重要 一定要先注册设备 2 创建USG6000V 3 启动防火墙和连接客户机 3 开启一系列的功能和配置ip 4 避坑指南 1 先注册设备 很重要 一定要先注册设备 2 创建
  • vscode使用json后在浏览器报404not found

    user id 1 show 玲珑骰子安红豆 入骨相思知不知 name 王维 id 2 show 五花马 千金裘 name 李白 id 3 show 仰天大笑出门去 我辈岂是蓬蒿人 name 李白 list 王维 李白 如上是我写的json
  • c语言编程请增补函数fun

    题目 填空题 请增补函数fun 该函数的功能是 把从主函数中输入的字符串str2接在字符串str2的背面 例似 str2 How do str2 you do 结论输出 How do you do 试题程序 include include
  • 第十二届蓝桥杯国赛-H:和与乘积-python

    一 问题描述 二 问题分析 对于输入的一个数列 求这个数列的满足以下条件的区间个数 该区间的元素和与元素积相等 思路就是计算每一个区间的元素和与元素积 如果相等就计数加一 获取每个区间采用前缀和跟前缀积的方法 详见代码 注 这种方法也只能通
  • Sass语法学习

    1 编译监控 自动监控把sass编译成css文件 命令行 sass watch sass basic scss css basic css 在监控的sass后面 可以为 sass 生成 css 样式指定生成的格式 默认是nested型 st