临漳+网站建设做淘宝网站用什么软件有哪些内容

当前位置： 首页 > news >正文

临漳+网站建设,做淘宝网站用什么软件有哪些内容,如何搭建app开发平台,wordpress备份如何恢复02 【Sass语法介绍-变量】 sass有两种语法格式Sass(早期的缩进格式#xff1a;Indented Sass)和SCSS(Sassy CSS) 目前最常用的是SCSS#xff0c;任何css文件将后缀改为scss#xff0c;都可以直接使用Sassy CSS语法编写。 所有有效的 CSS 也同样都是有效的 SCSS。 Sass语…02 【Sass语法介绍-变量】 sass有两种语法格式Sass(早期的缩进格式Indented Sass)和SCSS(Sassy CSS) 目前最常用的是SCSS任何css文件将后缀改为scss都可以直接使用Sassy CSS语法编写。 所有有效的 CSS 也同样都是有效的 SCSS。 Sass语法介绍-变量 1.前言 Sass 为 CSS 引入了变量这一功能在实际项目中使用最普遍的除了 Sass 嵌套 就是 Sass 变量了你可以把 CSS 的某个属性值定义为变量然后在项目中任何需要它的地方来使用它。本节主要讲解 Sass 变量的主要语法变量的声明、引用、作用域等同时还会讲解在实际项目中一般是如何来维护 Sass 变量的。 2.什么是 Sass 变量 ? Sass 简介中提到 Sass是 CSS的扩展语言变量是 CSS的扩展功能。 举个例子假如我们项目中很多地方要设置一个字体颜色为红色那么我们完全可以把这个颜色抽出来作为一个变量然后在需要设置字体颜色的地方引用这个变量。这样有一个好处就是假如产品大大说要修改所有字体颜色的时候我们就不需要每处都去修改了直接更改变量的值就 OK 了我们用 Sass 代码来直观的感受下 \(variable: red;.title {color: \)variable; } h1 {color: \(variable; }可以看到上面的代码我们定义了 \)variable 这个变量然后在多个元素的样式中使用它那么变量的值都可以是什么呢这个一定要记住变量的值可以是 字符串数字颜色值布尔值列表Null 值 下面我们将详细的讲解 Sass 变量的语法。 3.使用变量 sass使用\(符号来标识变量。 变量的作用就是让你在整个样式表中保存并重用一些信息或数据。 比如存储颜色(color)、字体集或任何你想重用的CSS值。 3.1 变量声明 和css属性的声明property declaration很像 如声明值为 #F90 的变量 \)highlight-color字体集变量 \(highlight-color: #F90; \)font-stack: Helvetica, sans-serif;body {font: 100% \(font-stack;color: \)highlight-color; }输出结果为 body {font: 100% Helvetica, sans-serif;color: #F90; }变量有作用域当变量定义在css规则块内则该变量只能在此规则块内使用。 3.2 变量引用 凡是css属性的标准值比如说1px或者bold可存在的地方就可以使用变量。 css生成时变量会被它们的值所替代。 \(color:#A34554;.box {width: 300px;height: 400px;-left{width: 30%;color: \)color;} }生成css为 .box {width: 300px;height: 400px; } .box-left{width: 30%;color: #A34554; }声明变量时变量的值也可以引用其他变量如下 \(highlight-border 变量中使用了 \)highlight-color 变量 \(highlight-color: #F90; \)highlight-border: 1px solid \(highlight-color; .selected {border: \)highlight-border; }//编译后.selected {border: 1px solid #F90; }3.3 变量名中的中横线(hyphen)和下划线(underscore) sass的变量名可以使用中划线和下划线用中划线声明的变量可以使用下划线的方式引用反之亦然。 也就是变量名中的中横线和下划线没有区别两者互通。 比如下面的示例中横线的\(link-color可以通过下划线的\)link_color引用。 \(link-color: blue; a {color: \)link_color; }//编译后a {color: blue; }相对使用中横线更普遍些 4.变量的作用域 从 Sass 3.4.x 版本开始Sass 中开始有作用域的概念。和 javascript 中的变量类似Sass 的变量也是有作用域这个概念的也有全局作用域和局部作用域之分我们举个例子来看下 \(main-color: red; h1 {\)main-color: green; // 局部变量color:\(main-color; } h2 {color:\)main-color; }我们看到在第一行代码我们声明了一个全局变量 \(main-color 在 h1 的样式中我们又声明了一个和全局变量同名的 \)main-color 在 h1 样式中声明的这个 \(main-color 就是局部变量在 h1 的样式中会引用局部变量而不是全局变量最终转换为 CSS 的代码如下 h1 {color: green; }h2 {color: red; }4.1 !global 标识符 上面我们讲解了局部变量和全局变量那么如果我想用局部变量去改变全局变量呢 Sass 允许使用 !global 标识符来设置局部变量为全局以此来改变局部变量的作用范围我们还是用上面的代码来改变局部变量的作用域为全局 \)main-color: red; h1 {\(main-color: green!global;color:\)main-color; } h2 {color:\(main-color; }我们来看下上面这段转换为 CSS 是这样的 h1 {color: green; }h2 {color: green; }可以看到我们覆盖掉了全局变量 \)main-color 的值 red 不过请你记住在大型项目中尽量不要使用这种方式去改变全局变量这可能会影响到其他页面的样式改变 4.2 !default标识符 一般来说我们反复的声明一个重名变量那么最后一个声明的变量值会覆盖上面所有的比如像下面这样 \(main-color: red; \)main-color: green; h1 {color:\(main-color; }那么最后编译的时候会使用最后一次声明的变量值也就是 green 我们看下编译后的代码 h1 {color: green; }这样就有一个问题在实际的项目开发中假如需要你来写一段公共的 Sass 代码给其他开发者使用那么如果你的代码中声明了 \)main-color 这个变量那么其他开发者在自己页面也声明了 \(main-color 这个变量并且他是在导入你的这段代码之前声明的那么他的就会被覆盖掉这是不行的 所以这里你需要使用 !default 标识符顾名思义就是默认值如果这个变量被声明并赋值了那么就使用声明的值否则就使用默认值。我们还是用上面的例子来看下 \)main-color: red; // 假如这个是其他开发者自己声明的 \(main-color: green!default; // 假如这个是你的代码片段声明的 h1 {color:\)main-color; }那么在最后编译的时候会使用 red 这个变量值如果其他开发者没有声明这个变量就会使用 green 这个变量值我们来看下编译后的效果 h1 {color: red; }上面我们演示了 !default 标识符的作用这个在你使用 Sass 开发一个独立的模块的时候或者使用 Sass 开发一个库来供他人使用的时候!default 标识符石非常有用的 5.实战经验 上面我们已经讲解了 Sass 变量的语法和使用那在企业的实际项目中是怎么应用 Sass 变量的呢这里以一个使用 webpack 搭建的前端项目为例一般我们都会抽离出 1n 个文件来专门声明 Sass 变量(抽离出几个文件视项目大小而定)如下图所示 如上图所示我们一般会在 styles 目录下新建一个 variables.scss 文件来管理声明的全局变量我们接着来看下在这个文件中是怎么写的 我们可以看到在这个文件中不但声明了很多变量还对其做了注释这样就很易于后期的管理尤其是在多人开发的大型项目中对整个项目的样式提取出一些全局变量是很有必要的 6.小结 Sass 变量的使用及语法主要包括 变量的声明变量的引用变量的作用域 我们还是通过下图来回忆一下本节的内容 在实际的项目中Sass 变量的使用频率也是非常高的不亚于 Sass 嵌套所以一定要好好掌握这一节的内容变量的应用会让你更加顺手的去管理项目中的样式