生意不好怎么做营销,杭州优化网站,o2o 电商网站 微商城 ppt,昆山网站建设培训1、下载livelive sass compiler插件并配置 // 在 已有代码 下面 添加下面 代码#xff0c;一般刚刚下载打开最后一行是#xff1a;// liveSassCompile.settings.autoprefix: [],// 所以直接 把下面复制进去保存就行liveSassCompile.settings.autoprefix一般刚刚下载打开最后一行是// liveSassCompile.settings.autoprefix: [],// 所以直接 把下面复制进去保存就行liveSassCompile.settings.autoprefix: [// 1%是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。// last 2 versions是指 每个浏览器的最后2个版本。 1%,last 2 versions],liveSassCompile.settings.formats: [{format: expanded, // 出口css样式为展开格式extensionName: .css,savePath: ~/../css, // null 为当前目录savePathReplacementPairs: null}],liveSassCompile.settings.generateMap: false, // 去掉编译时出现的css.map文件liveSassCompile.settings.excludeList: [/**/node_modules/**,/.vscode/**], 2、SCSS 笔记 SCSS 是一个 CSS 的预处理器是 CSS 的扩展语言可以帮助我们减少重复的代码生成更好的 CSS 格式化代码并且兼容所有版本的 CSSSCSS 是 对于 CSS3 的 SASS 所以我们学的时候把文件后缀写为 “.scss”由于我们的配置当遇到兼容性代码出口文件会自动配置如下图 2.1 语法嵌套规则 2.1.1 选择器嵌套 避免了重复输入父选择器复杂的 CSS 结构更易于管理 2.1.2 父选择器 在嵌套 CSS 规则时可以用 代表嵌套规则外层的父选择器。例如 2.1.2.1 当给某个元素设定 hover 样式时 2.1.2.2 当 body 元素有某个 classname 时 2.1.3 属性嵌套 有些 CSS 属性遵循相同的命名空间 (namespace)比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性同时也为了避免了重复输入SCSS 允许将属性嵌套在命名空间中注意font后面要加一个空格 2.1.4 占位符选择器 %foo 必须通过 extend 有时需要定义一套公共样式 使用占位符选择器%foo然后通过 extend 指令引入尤其是在制作 SCSS 样式库的时候在需要时引入希望 SCSS 能够忽略用不到的样式达到简略代码的目的。 2.2 代码注释 SCSS 支持两种注释 标准的css多行注释 /* ... */ 会编译到.css文件中单行注释 // 不会编译到.css文件 2.3 SCSS 变量 2.3.1 CSS 定义变量的方法 使用 CSS 自定义属性_打不着的大喇叭的博客-CSDN博客 2.3.2 SCSS 定义变量的方法 2.3.2.1 定义规则 变量以美元符号($)开头后面跟变量名变量名是不以数字开头的可包含字母、数字、下划线、横线连接符写法同css即变量名和值之间用冒号(:)分隔变量一定要先定义后使用 2.3.2.2 连接符与下划线 2.3.3 变量的作用域 2.3.3.1 局部变量 定义在选择器内容定义的变量只能在选择器范围内使用 2.3.3.2 全局变量 定义后能全局使用的变量 1、在选择器外面的最前面定义的变量 2、使用 !global 标志定义全局变量 2.3.4 变量值的类型 SCSS 支持 7 种主要的数据类型 数字1, 2, 13, 10px30%字符串有引号字符串与无引号字符串foo, bar, baz颜色blue, #04a3f9, rgba(255,0,0,0.5)布尔型true, false空值null数组 (list)用空格或逗号作分隔符1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object(key1: value1, key2: value2) 2.3.5 默认值 2.4 SCSS 导入import 2.4.1 import SCSS 拓展了 import 的功能允许其导入 SCSS 或 SASS 文件。被导入的文件将合并编译到同一个 CSS 文件中另外被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 2.4.1.1 纯SCSS文件引入注意点 注意 1、如果一个目录正在被 SCSS 程序监测目录下的所有scss/sass源文件都会被编译但通常不希望局部文件被编译因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译文件名可以以下划线 _开头如下图的 public 最好前面添加 “_” 开头这样就不会导出 css 文件如 _test.scss 文件因为我们只是单纯引入不需要 css 文件。 2、还有就是带_文件在引入时可以不写_,即引入 _test.scss , import test 3、这也就意味着同一个目录下不能同时出现两个相关名的 SCSS 文件一个不带一个带添加下划线的文件将会被忽略。 2.4.1.2 跟我们普通css里面import的区别 如下几种方式都将作为普通的 CSS 语句不会导入任何 SCSS 文件 文件拓展名是 .css文件名以 http:// 开头文件名是 url()import 包含 media queries。 2.5 SCSS 混合指令 (Mixin Directives)
混合指令Mixin用于定义可重复使用的样式。混合指令可以包含所有的 CSS 规则绝大部分 SCSS 规则甚至通过参数功能引入变量输出多样化的样式。 2.5.1 定义与使用混合指令 mixin mixin mixin-name() {/* css 声明 */} 2.5.1.1 标准写法 2.5.1.2 嵌入选择器 2.5.1.3 使用变量 2.5.1.4 使用变量多参数 注意必须多少参数多少值没有值可为0 2.5.1.5 指定默认值 2.5.1.6 可变参数 2.5.2 mixin混入总结 mixin是可以重复使用的一组CSS声明mixin有助于减少重复代码只需声明一次就可在文件中引用混合指令可以包含所有的 CSS 规则绝大部分 SCSS 规则甚至通过参数功能引入变量输出多样化的样式。使用参数时建议加上默认值 2.6 SCSS extend继承指令
在设计网页的时候通常遇到这样的情况一个元素使用的样式与另一个元素完全相同但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class一个通用样式一个特殊样式。 2.6.1 用占位选择器继承 注意上面的图中 .alert 只是单纯的用于继承不用做元素类名但是它却导出成了 类名这时我们可以用 占位选择器%foo 对其进行声明不用于元素类名 2.6.2 使用多个extend 2.6.3 extend多层继承 2.7 mixin混入和 extend继承的区别 2.8 SCSS 运算符 的基本使用 2.8.1 等号 操作符 所有数据类型都支持等号运算符: 符号说明等于!不等于 2.8.2 关系比较运行符 符号说明 lt小于 gt大于 lte小于等于 gte大于等于 2.8.3 逻辑 运行符 符号说明and逻辑与or逻辑或not逻辑非 2.8.4 数字 运行符 符号说明加-减*乘/除%取模 线数字、百分号、css部分单位px、pt、in...【线数字与百分号或单位运算时会自动转化成相应的百分比与单位值】 2.8.4.1 “ ” 运算 2.8.4.2 “ - ” 运算 2.8.4.3 “ * ” 运算 注意这里 “*” 左右两边 都 带 单位就会报错 2.8.4.4 “ / ” 运算 注意 / 在 CSS 中通常起到分隔数字的用途SassScript 作为 CSS 语言的拓展当然也支持这个功能同时也赋予了 / 除法运算的功能。也就是说如果 / 在 SassScript 中把两个数字分隔编译后的 CSS 文件中也是同样的作用。 以下三种情况 / 将被视为除法运算符号 如果值或值的一部分是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分 注意如果需要使用变量同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中只需要用 #{} 插值语句将变量包裹。 2.8.4.5 “ % ” 运算 2.8.5 字符串运算 注意 “ ” 可用于连接字符串。[ foo bar ] 和 [ foo bar ]运算结果是有引号的[ foo bar] 和 [ foo bar ]运算结果则没有引号。如果有一个值是函数返回的情况可能不一样。 2.9 SCSS 插值语句 #{ }
提出需求如果需要使用变量同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中。
解决方法只需要用 #{} 插值语句将变量包裹。 通过 #{} 插值语句可以在选择器、属性名、注释中使用变量 2.10 SCSS 常见函数的基本使用 常见函数简介更多函数列表可看Sass: Built-In Modules 2.10.1 Color颜色函数 SCSS 包含很多操作颜色的函数。例如lighten() 与 darken()函数可用于调亮或调暗颜色opacify()函数使颜色透明度减少transparentize()函数使颜色透明度增加mix()函数可用来混合两种颜色。 2.10.2 String字符串函数 SCSS 有许多处理字符串的函数比如向字符串添加引号的 quote()、获取字符串长度的str-length() 和 将内容插入字符串给定位置的 str-insert()。 2.10.3 Math数值函数 数值函数处理数值计算例如percentage()将无单元的数值转换为百分比round()将数字四舍五入为最接近的整数min()和max()获取几个数字中的最小值或最大值random()返回一个随机数。 2.10.4 List 函数 List 函数操作 Listlength() 返回列表长度nth() 返回列表中的特定项join() 将两个列表连接在一起append() 在列表末尾添加一个值。 2.10.5 Map函数 Map函数操作Mapmap-get() 根据键值获取map中的对应值map-merge() 来将两个map合并成一个新的mapmap-values() 映射中的所有值。 2.10.6 selector 选择器函数 选择符相关函数可对CSS选择进行一些相应的操作例如selector-append()可以把一个选择符附加到另一个选择符selector-unify()将两组选择器合成一个复合选择器。 2.10.7 自检函数 自检相关函数例如feature-exists() 检查当前 SCSS 版本是否存在某个特性variable-exists() 检查当前作用域中是否存在某个变量【注意例如检测 $color 不需要加 $写 color 即可】mixin-exists() 检查某个mixin是否存在。 自检函数通常用在代码的调试上 2.11 SCSS 流程控制指令if、for、each、while 2.11.1 if 控制指令 if()函数允许您根据条件进行分支并仅返回两种可能结果中的一种。语法方式同js的 if.... else if... else 2.11.2 for 指令 for 指令可以在限制的范围内重复输出格式每次按要求变量的值对输出结果做出变动。这个指令包含两种格式for $var from through 或者 for $var from to 区别在于 through 与 to 的含义 当使用 through 时条件范围包含与的值【例1-5包含 5】。而使用 to 时条件范围只包含的值不包含 的值【例1-5不包含 5】。另外$var 可以是任何变量比如 $i 但是必须是整数值。 2.11.3 each 指令 each 指令的格式是 $var in list , $var 可以是任何变量名比如 $length 或者 $name而 list 是一连串的值也就是值列表。 2.11.4 while 指令 while 指令重复输出格式直到表达式返回结果为 false。这样实现比 for 更复杂的循环。 2.12 SCSS function 的使用 2.12.1 函数的定义与使用 函数的作用把一些比较复杂或经常用些的内容进行抽离封装以便重复使用 2.12.1.1 函数的定义 提示函数名function-name 与function_name 是相同的function function-name($param1, $param2, ...){...return $value;
} 2.12.1.2 return 它只允许在 函数体 中使用并且每个 function 必须以return结束。当遇到 return时它会立即结束函数并返回其结果。 2.12.2 函数的使用及参数与默认值 /** *定义线性渐变*param $direction 方向*param $gradients 颜色过度的值列表*/function background-linear-gradient($direction, $start-color, $end-color:blue) {return linear-gradient($direction, $start-color, $end-color);
}1、正常传参调用
.header {background-image: background-linear-gradient(to right, red, green);
}2、省略默认值【因为默认值已经设好了】
.header {background-image: background-linear-gradient(to right, red);
}3、按照参数名传参
.header {background-image: background-linear-gradient($start-color: red, $direction: to bottom);
} 2.12.3 任意参数 $gradients... 注意后面这三点加上后这个是 可变参数function background-linear-gradient($direction, $gradients...) {return linear-gradient($direction, $gradients);
}.header {background-image: background-linear-gradient(to bottom, red, green, blue);
} 注意点 $widths: 50px,30px,100px;.logo {width: min($widths); 错误写法会报错我们需要用可变参数才对width: min($widths...);} 2.12.4 混入mixin和函数function的区别 混入mixin主要是通过传递参数的方式输出多样化的样式为了可以现实代码复用。函数的功能主要是通过传递参数后经过函数内部的计算最后return输出一个值。 2.13 三元条件函数 if 的使用 语法if($condition, $if-true, $if-false) 解释判断 $condition如果条件成立则返回 $if-true 的结果如果条件不成立则返回 $if-false 的结果。 2.14 SCSS use 的使用 从其他 SCSS 样式表加载mixinfunction和变量并将来自多个样式表的CSS组合在一起use加载的样式表被称为“模块”多次引入只包含一次。use也可以看作是对import的增强语法use url [as 重命名] 2.14.1 use 和 import 的区别 注意1使用 use 时会把前面所有文件的其中的同类名覆盖而 import则不会会全部显示。 注意2使用 use 时重复引用 一个文件会报错但你又想引用那就需使用模块名。 2.14.1.1 通过 as 使用新定义的模块名 注意如果下面没通过模块名去调用 $font-szie 就会报错可通过取消命名空间去除报错 2.14.1.2 通过 as 取消命名空间 可能use as * 来取消命名空间这种方式加载的模块被提升为全局模块 注意这种方式慎用 2.14.2 定义私有成员 如果加载的模块内部有变量只想在模块内使用可使用 $- 或 $_ 定义在变量头即可 2.14.3 定义默认值 2.14.4 use使用总结 use引入同一个文件多次不会重复引入而import会重复引入use引入的文件都是一个模块默认以文件名作为模块名可通过as alias取别名use引入多个文件时每个文件都是单独的模块相同变量名不会覆盖通过模块名访问而import变量会被覆盖use方式可通过 use xxx as *来取消命名空间建议不要这么做use模块内可通过 $- 或 $_ 来定义私有成员也就是说或者-开头的Variables mixins functions 不会被引入use模块内变量可通过default 定义默认值引入时可通用with...的方式修改可定义-index.scss或_index.scss来合并多个scss文件它use默认加载文件 2.15 SCSS forward的使用
作用通过 forward 加载一个模块的成员并将这些成员当作自己的成员对外暴露出去类似于类似于 es6 的 export ...通常用于跨多个文件组织 SCSS 库 2.15.1 转发、合并SCSS 注意当多个被转发的文件存在相同变量、函数、混入时会有问题可以通过定义前缀解决 2.15.2 选择性转发 默认情况下forward 会将一个模块中所有成员都转发如果只想转发某些成员当你不想 转发所有变量、函数、混入时可使用 hide \ show : forward module hide $var, mixinName, fnName 禁止转发某些成员forward module show $var, mixinName, fnName 只转发某些成员 2.15.3 转发时定义前缀 各个成员通过逗号 , 分隔开如果成员是变量不能省略 $ 符号。 2.15.4 转发时配置模块的成员 2.15.5 use 与 forward 一起使用的情况 当一个模块里面须要同时使用use与forward引用同一文件时建议先使用forwar后再使用use不然某些情况可能报错 use uses/code;
forward uses/common as com-*;
forward uses/global as glob-* show glob-base;
use use/common as c1;
.test {font-size: c1.$font-size;color: code.$color;
} 2.16 SCSS 中 at-root 使用
作用at-root 可以使被嵌套的选择器或属性跳出嵌套【例子比如一段嵌套的样式对应的html有一天需要移动到另一层div中这时你加了 at-root 在样式中就什么都不用动了】 at-root selector{...} 2.16.1 普通嵌套 2.16.2 使用 at-root 跳出嵌套 2.16.2.1 作用 某个 选择器使其跳出嵌套 2.16.2.2 作用 某些 选择器使其跳出嵌套 2.16.3 使用 at-root 结合 #{} 实现BEM效果 需要实现下面的效果.block{width: 1000px;}.block__element{font-size: 12px;}.block--modifier{font-size: 14px;}.block__element--modifier{font-size: 16px;} 2.16.4 at-root (without: …) 和 at-root (with: …) 的使用 默认 at-root 只会跳出选择器嵌套而不能跳出 media 或 support 如要跳出这两种需用 at-root (without: media)at-root (without: support)。这个语法关键词有四个【at-root (without: all)、at-root (without: rule)】 all表示所有 rule表示常规cssmedia表示media supports表示supports 2.16.4.1 at-root (without: …) at-root (without: ...) 表示在当前作用域生成的 CSS 规则将不包含指定的选择器。例如 .container {at-root (without: .nested) {color: red;}
}.nested {color: blue;
} 上述代码中使用 at-root (without: .nested) 指令将生成 .container 的规则放在顶层排除了包含 .nested 的规则并且生成的 CSS 如下 .container {color: red;
}.nested {color: blue;
} 注意到 .nested 规则没有被移动到顶层因为在 at-root (without: .nested) 中指定了排除该选择器。 2.16.4.2 at-root (with: …) at-root (with: ...) 表示只有指定的选择器会被包含在生成的 CSS 规则中。例如 .container {color: red;at-root (with: .nested) {color: blue;}
}.nested {font-weight: bold;
} 上述代码中使用 at-root (with: .nested) 指令将生成 .container 的规则和包含 .nested 的规则放在顶层并且生成的 CSS 如下 .container {color: red;
}.nested {color: blue;font-weight: bold;
} 可以看到.container 和 .nested 的规则都被移动到了顶层。这是因为在 at-root (with: .nested) 中指定了只包含 .nested 选择器的规则。 看到这里完结了 O.o
