【笔记】sass

2023-10-30

sass入门
1、可以定义变量
2、嵌套
3、导入其他sass文件,最后编译为一个CSS文件
4、@mixin定义一些代码片段,且可传参数。@include
5、@extend组合代码声明
6、运算
7、颜色函数color:darken($linkColor,10%)
  


语法
1、后缀名:sass不适用大括号和分号,scss使用大括号和分号
2、导入:
若导入sass则生成一个css文件,若导入css文件,则按照原来那样只是@import.
源文件_reset.scss。@import“reset.scss”、@import"reset"都合法
3、注释//和/**/   //不会转入css文件中
4、变量:
$开头
默认变量在值后面加上!default、覆盖只需要在默认变量之前重新声明下变量
特殊变量应用于class和属性、应用于复杂的属性值:以#{$variables}形式
多值变量
list:函数参考sass Functions(http://sass-lang.com/documentation/Sass/Script/Functions.html)
map
全局变量变量值后面加上!global即为全局变量。这个目前还用不上,不过将会在sass 3.4后的版本中正式应用
5、嵌套
选择器嵌套 &表示父元素选择器
属性嵌套 属性拥有同一个开始单词,如border-width,border-color
6、@at-root:跳出选择器嵌套,不能跳出@media或@support
@at-root (without: ...)和@at-root (with: ...)
应用于@keyframe
7、混合@mixin
声明的@mixin通过@include来调用
无参数mixin、有参数mixin、多个参数mixin、多组值参数mixin(在变量后加三个点表示)
@content:使@mixin接受一整块样式
传递参数的用@mixin,而非传递参数类的使用下面的继承%
8、继承@extend
占位选择器%:不调用则不会有任何多余的css文件,通过@extend调用
在@media中暂时不能@extend @media外的代码片段,以后将会可以
9、函数
自定义函数,以@fuction开始(参考sass Functions),@return返回
10、运算(加减乘除)运算符前后请留一个空格,不然会出错
11、条件判断及循环
@if判断、@else
三目判断(if($condition, $if_true, $if_false))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【笔记】sass 的相关文章

  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮
  • jQuery 生成 div 和碰撞检测

    所以我的学校作业项目快要结束了 我只是错过了两件我似乎无法弄清楚的主要事情 1 如何生成具有随机位置的间隙的管道障碍物 以便鸟可以飞过 尝试使用一个函数来更改间隙位置的管道 div 的 css right attr 并在以下情况下移除管道它
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • Angular:如何动态更改 scss 变量?

    我对 scss 很陌生 所以我想知道是否可以使用组件的 Typescript 来更改 scss 变量 所以考虑一下 html div div scss thememode theme1 textcolormode nonHover colo
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C

随机推荐

  • 架构内容框架建立在标准内

    内容元模型 架构内容框架建立在标准内容元模型的基础上 标准内容元模型对架构中存在的所有类型的构建块进行了定义 内容元模型的一个高层概览图如下图所示 这个元模型图示了可以如何去描述这些构建块以及它们之间如何相关联 内容元模型概览 在创建和管理
  • PCB设计-Allegro软件入门系列-扇出

    在cadence布线时 对于BGA封装的器件 管脚通常较密且管脚一般较多 且在布线时往往需要在管脚旁边先打过孔再在内层走线 往往用手动的方法一个一个过孔添加的方法是速度很慢 而且十分容易出错而且容易造成疲惫 所以软件已经现在有一个Fanou
  • ue4删除静态光照数据

    世界设置 lightmass下方光照贴图 勾选force no precomputed lighting后构建 可以清除之前的静态光照贴图
  • Qt5.9Creator中自定义信号SIGNAL和在另一个类中用该信号触发槽函数用法

    本文章主要总结在Qt5 9Creator中自定义一个信号 然后在另一个类里面用该信号触发槽函数的实例 具体的实例是在类ClassA中自定义一个信号Signal1 然后在MAinWindows类中用该信号Signal1来触发槽函数SlotFu
  • npm---.npmrc

    一 npm运行时配置文件 npmrc 作用 设置package json中的依赖包的安装来源 不设置可能会因为网络问题无法下载依赖 二 配置 npmrc 设置镜像 普通包来源 registry https registry npmmirro
  • STL学习(21):容器适配器

    容器适配器不是二级容器 它可以在一级容器的基础上再次封装 如 queue
  • 写给自己:SQLyog连接数据库出现错误1045的参考解决方法

    写给自己 SQLyog连接数据库出现错误1045的参考解决方法 在多次遇到错误1045并查找了若干篇博客后 总结出自己在解决这个问题时常见的步骤 和个人的一些习惯 总结下来方便查找 一般过程 检查my ini文件配置 在mysql安装位置找
  • tp3.2.3php环境要求,在linux环境下配置thinkphp3.2.3框架运行环境的一些疑惑杂谈

    在linux环境下配置thinkphp3 2 3框架运行环境 nginx1 4 6 php5 5 mysql5 5 36 的一些疑惑杂谈 首先是安装phpstudy phpStudy Linux版 Win版同步上线 支持Apache Ngi
  • SSM+ 基于Java的花艺商城系统设计与开发 毕业设计-附源码171536

    摘 要 本论文主要论述了如何使用JAVA语言开发一个花艺商城系统 本系统将严格按照软件开发流程进行各个阶段的工作 采用B S架构 面向对象编程思想进行项目开发 在引言中 作者将论述花艺商城系统的当前背景以及系统开发的目的 后续章节将严格按照
  • STM32单片机OLED贪吃蛇游戏记分计时

    实践制作DIY GC00165 OLED贪吃蛇游戏 一 功能说明 基于STM32单片机设计 OLED贪吃蛇游戏 二 功能说明 STM32F103C系列最小系统板 0 96寸OLED显示器 上 下 左 右4个按键 1 通过OLED配合按键实现
  • Verilog基础知识0(`define、parameter、localparam三者的区别及举例)

    1 概述 define 作用 gt 常用于定义常量可以跨模块 跨文件 范围 gt 整个工程 parameter 作用 gt 常用于模块间参数传递 范围 gt 本module内有效的定义 localparam 作用 gt 常用于状态机的参数定
  • -bash: cd: /.ssh: 没有那个文件或目录

    解决方法
  • 红宝书第一章总结

    一个完整的JavaScript实现由下列三个不同的部分组成 核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM JavaScript ECMAScript DOM BOM
  • keepalived学习记录:对其vip漂移过程采用gdb跟踪

    对其vip漂移过程采用gdb跟踪 keepalived工具 主要功能 产生vip漂移过程两种情况 gdb调试常用命令 gdb调试时打到的函数栈 供学习参考 系列文章 keepalived学习记录 对其vip漂移过程采用gdb跟踪 Keepa
  • Akka 实践(二)- java开发demo1

    下面就Akka的一个java demo来说明Akka 如何运作的 1 首先下载 Akka的官方包 下载地址为 http akka io downloads 我下载的是 Akka的2 3 15 解压这个压缩包 准备拷贝相关的jar包到自己的工
  • poj 1953 dp(无连续1的01串个数)

    题意 问长度为n的无连续1出现的01串有多少个 思路 简单dp 思路1 dp i 0 表示以0结尾长度为i的串的个数 dp i 1 表示以1结尾长度为i的串的个数 则转移方程为dp i 0 dp i 1 0 dp i 1 1 和dp i 1
  • 算数基本定理求约数个数

    题目 最多约数问题 正整数x 的约数是能整除x的正整数 其约数的个数记为div x 例如div 10 4 设a 和b 是两个正整数 找出a 和b 之间约数个数最多的数x 的约数个数 样例输入 1 36 样例输出 9 算数基本定理 又称为正整
  • 自动化接口测试-第02天-接口用例设计思路、单接口用例、业务场景用例、postman

    更多功能测试以及全套学习路线图均在专栏 戳进去领取 系列文章目录 身为开发必知必会的Linux Linux远程连接 命令的使用 Linux命令大全 唯一以案例详解文 持续更新中 Linux命令大全以及数据库 唯一以案例详解文 已完结 Web
  • yield和join方法的使用。

    join方法用线程对象调用 如果在一个线程A中调用另一个线程B的join方法 线程A将会等待线程B执行完毕后再执行 yield可以直接用Thread类调用 yield让出CPU执行权给同等级的线程 如果没有相同级别的线程在等待CPU的执行权
  • 【笔记】sass

    sass入门 1 可以定义变量 2 嵌套 3 导入其他sass文件 最后编译为一个CSS文件 4 mixin定义一些代码片段 且可传参数 include 5 extend组合代码声明 6 运算 7 颜色函数color darken link