sass变量

sass变量用法

1、sass变量必须以$符开头,后面紧跟着变量名

2、变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)

3、如果值后面加上!default则表示默认值


 默认变量

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

scss.style

css.style

默认变量解说:

sass的默认变量:

一般是用来设置默认值,然后根据需求来覆盖的

覆盖方式:

只需要在默认变量之前重新声明下变量即可

编译后的line-height为2,而不是我们默认的1.5。


 普通变量

sass的普通变量:定义之后可以在全局范围内使用。

scss.style

css.style


特殊变量

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

scss.style

css.style


 多值变量

多值变量分为list类型和map类型:

list类型有点像js中的数组

map类型有点像js中的对象

list

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

定义

scss.style

css.style

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即可)

定义

scss.style

css.style


 全局变量

在变量值后面加上!global即为全局变量。

这个目前还用不上,不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病,所以才有了这个全局变量。

目前变量机制

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

scss.style

css.style

启用global之后的机制

请注意,这个目前还无法使用,所以样式不是真实解析出来的。

scss.style

css.style


 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=i2b12j&title=sass变量

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

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

相关文章

根据您的命令-命令设计模式

命令设计模式是一种广为人知的设计模式,它属于行为设计模式(“四人帮”的一部分)。 顾名思义,它与应用程序中的动作和事件有关。 问题陈述: 假设有一个网页将在其中包含多个菜单的情况。 编写此代码的一种方法是使条件…

用js和jQuery做轮播图

Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:relative; }.images{position:relative;width: 100%;height: 400px; } .images img{position:absolute;left: 0;top: 0;width: 100%;height: 400px;opacity: 0;fi…

【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果

、 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧&#xff0c;主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。 今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。…

拼多多分享好友砍价Java实现_拼多多砍价怎么分享到朋友圈 砍价发到微信朋友圈方法...

拼多多是一款电商社交的共享式购物平台&#xff0c;现在还推出了砍价的活动&#xff0c;只要邀请好友砍价&#xff0c;你就以最低的价格购买商品&#xff0c;还可以可能是免费拿到&#xff0c;那么今天小编就给大家讲讲如何将自己的砍价信息分享到微信朋友圈。首先下载手机拼多…

通过6个简单的步骤在Windows上运行Apache Hive

注意 &#xff1a;您需要安装cygwin才能运行本教程&#xff0c;因为Hadoop&#xff08;Hive需要&#xff09;需要cygwin才能在Windows上运行。 至少&#xff0c;系统中必须存在Basic&#xff0c;Net&#xff08;OpenSSH&#xff0c;tcp_wrapper软件包&#xff09;和与安全相关的…

vue 环境的搭建及初始化项目

其实超级简单&#xff0c;虽然网上很多&#xff0c;但是我顺便记录下相当于做笔记吧 1nodejs 的安装&#xff0c; 在node官网下载&#xff0c;点击安装&#xff0c;安装的时候最好选择路径在d盘 2设置环境变量 我的电脑-->属性-->系统环境变量- 系统变量新增一个NODE…

Java堆转储:您可以完成任务吗?

如果您像我一样对Java性能充满热情&#xff0c;那么堆转储分析对您来说应该不是一个谜。 如果是这样&#xff0c;那么好消息是您将有机会提高您的Java故障诊断技能和JVM知识。 JVM现已发展到今天&#xff0c;与旧的JDK 1.0 – JDK 1.4天相比&#xff0c;今天生成和分析JVM堆转…

java 调用 ictclas50_1-Ictclas50分词系统ForJava

Ictclas50是一个分词库&#xff0c;我嘛主要用来做中文分词&#xff0c;其也能分出词性等东西。1.环境搭建进入到下载页面进行下载&#xff1a;如下图&#xff1a; 因为我的系统是64位的windows&#xff0c;所以选择了到数第三行进行下载。其JAVA版本是通过JNI去调用dll库&…

Beam概念学习系列之Pipeline Runners

不多说&#xff0c;直接上干货&#xff01; https://beam.apache.org/get-started/beam-overview/ 在 Beam 管道上运行引擎会根据你选择的分布式处理引擎&#xff0c;其中兼容的 API 转换你的 Beam 程序应用&#xff0c;让你的 Beam 应用程序可以有效的运行在指定的分布式处理引…

运行 java classnotfound_JAR运行出现ClassNotFoundException异常的解决办法

2009年10月30日最近在弄个聊天室,由于要跟数据库通信,用到了JDBC的3个jar,在eclipse里OK的,但布置到服务器坏事了,不知道怎么弄JDBC的3个jar了写个autoStart.batjava -jar chatServer.jarpause运行报错:F:\mydocuments\java project\socketTest\release>java -jar chatServe…

idea 创建多模块依赖Maven项目

转载地址&#xff1a; http://www.cnblogs.com/tibit/p/6185704.html idea 创建多模块依赖Maven项目 本来网上的教程还算多&#xff0c;但是本着自己有的才是自己的原则&#xff0c;还是自己写一份的好&#xff0c;虽然可能自己也不会真的用得着。 1. 创建一个新maven项目 2.…

用Java弹出创建新的消息通知

首先创建JFrame作为弹出窗口。 在其中添加一些JLabel以包含信息&#xff0c;并在适当的位置分配它们&#xff0c;使其看起来像一条通知消息。 下面给出了示例代码&#xff1a; String message You got a new notification message. Isnt it awesome to have such a notificat…

定位-固定定位

把box2设为固定定位&#xff1a; <!DOCTYPE html> <html lang"en" dir"ltr"><head><meta charset"utf-8"><title>定位</title><style media"screen">.box1{width:100px; height: 100px;ba…

Java并发执行器的懒惰开发人员简介

如果我告诉您util.concurrent API自2004年起提供此类服务&#xff0c;我就会自欺欺人。但是&#xff0c;我想回顾一下一些很酷的功能。 并发专家&#xff0c;现在是时候关闭该窗口了。 所有其他人&#xff0c;请紧紧抓住乐趣。 你不会忘记你的根源 执行程序是具有单个执行方法…

《我们应该怎样做需求分析》阅读笔记

认识&#xff1a;软件需求分析是贯穿软件项目从出生到成长或者死亡的&#xff0c;我们必须搞清楚到手的软件是为了什么要做什么做成什么样&#xff0c;通过顾客的描述彼此的合作分析需求与业务逻辑&#xff0c;不断改进从而实现软件在合理范围内符合顾客要求。 怎么做&#xff…

(转)VS2010/MFC编程入门之前言

鸡啄米的C编程入门系列给大家讲了C的编程入门知识&#xff0c;大家对C语言在语法和设计思想上应该有了一定的了解了。但是教程中讲的例子只是一个个简单的例程&#xff0c;并没有可视化窗口。鸡啄米在这套VS2010/MFC编程入门教程中将会给大家讲解怎样使用VS2010进行可视化编程&…

JavaOne 2012:JavaFX图形技巧和窍门

我回到希尔顿&#xff08;皇家宴会厅B&#xff09;看了Richard Bair的&#xff08;Oracle Java客户架构师&#xff09;的“ JavaFX图形技巧和窍门”。 Bair与FX Experience相关联&#xff0c;并且显然了解JavaFX。 拜尔说&#xff0c;他演讲的主题是表演。 他告诫说&#xff0c…

web前端知识点1

1. input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。 错误 层级显示优先级&#xff1a; frameset > 表单元素 > 非表单元素 在html中&#xff0c;帧元素&#xff08;frameset&#xff09;的优先级最高&#xff0c;表单元素比非表单元素的优…

java单元测试算初级_Java____Eclipse下JUnit单元测试(初级)

给大家分享一个链接希望对你们有帮助 http://blog.csdn.net/huangbiao86/article/details/6709742今天看图片命名唯一的策略时看到有个大大用JUnit测试&#xff0c;神奇的样子&#xff0c;遂上网搜集来三篇JUnit测试的入门文章&#xff0c;作为参考。原作地址在上面&#xff0c…

有没有更好的Marker方法?

自Java 1.5推出以来&#xff0c;就是否在Java中使用Marker接口进行了广泛的讨论和辩论。 这是因为Java 1.5引入了注释功能&#xff0c;这些功能几乎可以解决Marker接口的目的。 本文将涵盖这场辩论的一个有趣的部分。 定义&#xff1a; Java中的标记接口是一个空接口&#xff…