同步发布在个人站

变量

局部变量和全局变量的定义

Sass的变量是用$申明的,有局部变量(选择器内部的变量)和全局变量(不在任何选择器内的变量)。例如:

//这里$width就是全局变量
$width: 5em;
#mian{
width: $width;
} #sidebar {
$height: 4em;
height: $height;
}
/**
#sidebar-nav{
height: $height; //这里编译的时候会报错,找不到全局变量$height
}
**/

当然在选择器内部也可以定义全局变量,例如:

#selection{
$width: 5em !global; //!global这里$width就定位为全局变量了。
width: $width;
}
#selection-list{
width: $width;
}

默认变量定义

Sass提供默认变量,根据需求来覆盖默认值,如下:

$baseLineHeight:        2;
$baseLineHeight: 1.5 !default; //这里!default定义$baseLineHeight变量为默认变量
body{
line-height: $baseLineHeight;
}

编译后为:

body {
line-height: 2;
}

现在假设我们有个scss文件,代码如下(例子来源):

//文件_imgstyle.scss的内容:
// 变量
//---------------------------------
$imgStyleBorder: 1px solid #ccc !default;
$imgStylePadding: 2px !default;
$imgStyleRadius: 8px !default; // mixin
//---------------------------------
@mixin img-border($border:$imgStyleBorder,$padding:$imgStylePadding){
border: $border;
padding: $padding;
} @mixin img-rounded($radius:$imgStyleRadius){
border-radius:$radius;
} //样式
//---------------------------------
.img-border{
@include img-border;
} .img-rounded{
@include img-rounded;
} //文件style.scss内容: //导入_imgstyle.scss
@import 'imgstyle';

以上如果我们要改padding的值为5px,有以下方法:

方法一:重新覆写

//导入_imgstyle.scss
@import 'imgstyle'; .img-border{
padding:5px;
}

解析后的css:

.img-border {
border: 1px solid #cccccc;
padding: 2px;
}
.img-rounded {
border-radius: 8px;
}
.img-border {
padding: 5px;
}

方法二:改变@include的参数

//导入_imgstyle.scss
@import 'imgstyle'; .img-border{
@include img-border($imgStyleBorder,5px);
}

解析后:

.img-border {
border: 1px solid #cccccc;
padding: 2px;
}
.img-rounded {
border-radius: 8px;
} .img-border {
border: 1px solid #cccccc;
padding: 5px;
}

很明显,重复代码过多,在

变量特殊使用_imgstyle.scss文件中生命变量用了!default默认值,充分利用它的有点,改写style.scss,如下:

//申明$imgStylePadding为5px
$imgStylePadding: 5px; //导入_imgstyle.scss
@import 'imgstyle';

解析后为:

.img-border {
border: 1px solid #cccccc;
padding: 5px;
} .img-rounded {
border-radius: 8px;
}

如果变量需要镶嵌在字符串之中,以不带引号的字符串的方式出现,就必须需要写在"#{}"之中。

$position: left;

.aside{
margin-#{$position}: 30em;
}

编译后则是:

.aside {
margin-left: 30em;
}

变量的特殊规定

Sass变量中带了下划线:'-','_'为同一个变量,例如:

$main-width: 4em;
#main-bard{
width: $main_width; //正确,反之亦然。
}

多值变量

多值变量可用list和map遍历,多值变量想js中的数组和json。

list (列表)

list列表可以用空格,逗号,括号隔开。

  • nth 函数可以直接访问列表中的某一项;
  • join 函数可以将多个列表拼接在一起;
  • append 函数可以将某项添加到列表中;
  • @each 指令可以将添加样式到列表中的每一项。
$linkColor:#08c #333 !default;
a {
color: nth($linkColor, 1);
&:hover {
color: nth($linkColor, 2);
}
} $classNav: nav-bar,nav-list,nav-item;
@each $item in $classNav {
.#{$item} {
display: inline-block;
}
}

编译后则是:

a {
color: #08c;
} a:hover {
color: #333;
} .nav-bar {
display: inline-block;
} .nav-list {
display: inline-block;
} .nav-item {
display: inline-block;
}

map (集合)

map集合数据就是以键值对的方式出现,值可以是list。

格式为:$map: (key1: value1, key2: value2, key3: value3);。

$headings: (h1: 2em 3em, h2: 1.5em 2em, h3: 1.2em 1.5em);
@each $header,$size in $headings {
#{$header} {
font-size: nth($size, 1);
height: nth($size, 2);
}
}

编译后为:

h1 {
font-size: 2em;
height: 3em;
} h2 {
font-size: 1.5em;
height: 2em;
} h3 {
font-size: 1.2em;
height: 1.5em;
}

Sass细节一变量的更多相关文章

  1. sass揭秘之变量(转载)

    出处:http://www.w3cplus.com/preprocessor/sass-basic-variable.html 因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sas ...

  2. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  3. css预处理器--sass学习($变量名)

    sass有两种形式1.scss  2.sass 一:代码的基本用法 1.变量 如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中. $side : left; .rounded { border- ...

  4. 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...

  5. 【JavsScript】当 JavaScript 从入门到提高前需要注意的细节:变量部分

    在javaScript中变量使用var声明的变量是当前作用域的变量,不使用var声明的则肯定是全局变量. http://msdn.microsoft.com/zh-cn/library/dn64545 ...

  6. JAVA的程序代码小细节,变量的使用,以及一些细节的面试题

    package cn.hncu; public class LableDemo { public static void main(String[] args) { //demo1(); demo2( ...

  7. js如何操作sass里的变量及calc 使用sass变量

    scss文件里 :root { --height-primary: 240px; //--height-primary :变量名,css3有规则 } $header: var(--height-pri ...

  8. js如何操作或是更改sass里的变量

    /*上网搜索了好多方法,最终只有这一种比较适合*/ 参考: https://blog.csdn.net/weixin_44392565/article/details/85755592 https:/ ...

  9. [Sass]声明变量

    [Sass]声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词"var"开头,但是在 Sass 不使用这个关键词,而是使用大家都喜欢的美 ...

随机推荐

  1. hander消息机制原理

    基本原理 线程中调用Handler.sendMsg()方法(参数是Message对象),将需要Main线程处理的事件 添加到Main线程的MessageQueue中,Main线程通过MainLoope ...

  2. js下的面向对象

    本文记录了一种Javascript的面向对象方法及原理理解,示例代码如下: //构造函数 var MClass = function(value1, value2) { this.member = & ...

  3. 【吉光片羽】之 Web API

    1.在asp项目中直接添加apiController,需要新增Global.asax文件.再增加一个webapiConfig,如果需要访问方式为"api/{controller}/{acti ...

  4. sublime 3 快捷键

    来自(http://dengo.org/archives/970) Sublime text 3是我最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率. ...

  5. Javascript函数节流

    最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> < ...

  6. ECMAScript5 Array新增方法

    数组在各个编程语言中的重要性不言而喻,但是在之前的JavaScript中数组(JavaScript 数组详解)虽然功能已经很强大,但操作方法并不完善,在ECMAScript5中做了适当的补充. Arr ...

  7. 302 Moved Temporarily

    这个就是表示 重定向!! 不过,302在不同HTTP协议下的状态信息不同. Moved temporarily (redirect) 你所连接的页面进行了Redirect Found 类似于301,但 ...

  8. 已经为类型参数“Chart”指定了 constraint 子句。必须在单个 where 子句中指定类型参数的所有约束

    public abstract class FillWorkBook<TModel, Chart> where TModel : struct where Chart : new() wh ...

  9. ios 向工程里添加Fonts

    ios 向工程里添加Fonts 1.网上搜索字体文件(后缀名为.ttf,或.odf),假如你加入的字体为微软雅黑 2.把字体库导入到工程的resouce中 3.然后在你的工程的Info.plist文件 ...

  10. Atitit blend mode COLOR_DODGE 混合模式  “颜色减淡”模式

    Atitit blend mode COLOR_DODGE 混合模式  "颜色减淡"模式 1.1. 混合模式是图像处理技术中的一个技术名词1 1.2. 目录1 1.3. 颜色减淡C ...