Scss

演示失常状态鼠标悬浮状态点击状态演示为第一个区域（红色按钮） front在咱们进行前端开发时，如果用纯CSS实现这种鼠标悬浮时变深，点击变浅很容易（:hover,:focus），然而数量一多，写起来就十分恶心，所以咱们能够用scss来实现这种成果。 scss-codes.all{ //通用属性 width: 60px; height: 60px; margin: 20px; display: inline-block; border-radius: 10px; outline: none; //禁止点击时呈现外边 border: none; //禁止边框}$list: rgb(255, 0, 0),rgb(255, 217, 0),rgb(0, 38, 255),rgb(0, 255, 255); //色彩数组，能够应用HEX,rgb，这里最好不要用rgba@for $i from 1 through 4{ //through后的数字是要创立div的个数 .ml-#{$i}{ //如ml-1，ml-2，ml-3 @extend .all; //继承.all font-size: 10px * $i; background-color: nth($list,$i); //设置默认背景色彩，此处会调用色彩数组中对应的色彩 color: white; transition: all 0.3s; //增加动画成果 $color: nth($list,$i); //将对应色彩创立变量$color，避免出现反复语句 &:hover{ //鼠标悬浮 background: darken($color,20%); //亮度减淡20% } &:active{ //鼠标点击 background: lighten($color,20%); //亮度晋升20% } }}css-codes编译后的后果： ...

1. 变量申明及应用$color: red;.box { color: $color;}2. mixin和include2.1 简略应用$bgColor: red;@mixin bg { background: $bgColor;}.box { @include bg;}编译后果： .box { background: red;}2.2 进阶应用$namespace: 'zz';@mixin B($name){ $aaa: $namespace + '_' + $name; .#{$aaa} { @content; }}@include B(input) { font-size: 12px;}编译后果： .zz_input { font-size: 12px;}3. 列表和循环3.1 for循环$list: red, green, blue;@for $i from 1 through 3 { .status-#{$i} { color: nth($list, $i) }}@for $i from 1 to 4 { .status-#{$i} { color: nth($list, $i) }}注：nth能够获取数组的某个元素；through和to的编译后果统一，要留神是的to走不到最初一个数： ...

问题场景sass 版本: 1.52.1 当在 CSS 变量(CSS Variable)的自定义属性中应用 Sass/Scss 变量时 这种写法不会如期工作$primary: #409eff;:root { --fill-color-primary: $primary;}// 编译后 css，变量没有胜利利用 ↓:root { --fill-color-primary: $primary;}解决方案起因是 Sass 的语法扭转了 Breaking Change: CSS Variable Syntax...为了提供与一般CSS的最大兼容性，较新版本的Sass要求在插值中写入自定义属性值中的SassScript表达式...$primary: #409eff;:root { --fill-color-primary: #{$primary};}// 编译后 css:root { --fill-color-primary: #409eff;}扩大浏览sass 插值相似于 ES6 中的模板字符串插值 ${};

Jerry 之前的文章[.scss 文件里的特殊符号 - % 百分号和 $美元符号]()，介绍了 scss 文件里两个特殊符号，百分号 % 和美元符号 $ 的用法。 本文介绍另一个特殊符号 @ 的用法。 应用预处理器的长处之一是它们可能解决简单、简短的代码并对其进行简化。 这就是 mixins 派上用场的中央！ @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px); }同占位符 % 一样，@mixin 定义的 border-radius 自身也不会呈现在最终的 css 文件中。这是一种非侵入式的定义形式。 box class 应用 @include, 将 border-radius 的内容齐全蕴含进来，有点像编程语言里的宏替换，并且还反对参数替换。 最终生成的 css 内容： .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}Spartacus 中的一个例子： %cx-product-facet-navigation { min-width: 0; // hides the filter button in desktop experience @include media-breakpoint-up(lg) { button.dialog-trigger { display: none; } }}这里 media-breakpoint-up 是一个 mixin 的名称，lg 为传入的参数。 ...

postcss后处理器配置autoprefix前言scss为css的预处理器拉，其实就是让css能够应用变量而已，那么postcss就是后处理器拉本文讲的就是他的autoprefix插件能够主动增加浏览器css前缀 装置cnpm i -D sass node-sass postcss-cli autoprefixcnpm i -D postcss postcss-cli autoprefix package.json "scripts": { "build": "node-sass style.scss style.css --output-style expanded && postcss style.css -o style.css" },browserslist "browserslist": [ "last 5 Firefox versions", "Safari >= 6", "ie >= 8", "Edge 16", "> 1%", "last 1 Android versions", "last 1 ChromeAndroid versions", "last 2 Chrome versions", "last 2 Firefox versions", "last 2 iOS versions", "last 2 Edge versions", "last 2 Opera versions" ],postcss.config.jsmodule.exports = { plugins: [ require('autoprefixer') ]}style.scssa{ transition :transform 1s}body { user-select: none}style.cssa { -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s;}body { -webkit-user-select: none; -ms-user-select: none; user-select: none;}

如下图所示： $useTabsOnPDP: false !default; https://stackoverflow.com/que... 含意如下： !default 在 Bootstrap Sass 中常常应用。 它相似于反向 !important。 所有 Bootstrap 变量都应用 !default 设置，以容许开发人员进一步自定义疏导程序。 应用 !default sass 只会定义一个尚未设置的变量。 //Example1 Dress color = red$auroras-dress-color: blue;$auroras-dress-color: red;//Example2 Dress color = red$auroras-dress-color: blue !default;$auroras-dress-color: red;//Example3 Dress color = blue$auroras-dress-color: blue;$auroras-dress-color: red !default;那么为什么这很重要？ Bootstrap 是一个包。 大多数人不会编辑 Bootstrap 源代码。 永远不要更新疏导程序源。 要自定义疏导程序，您将增加本人的变量文件并应用疏导程序代码编译它，但永远不要接触本机疏导程序包。 Bootstrap sass 的页面在文档中具体介绍了如何自定义和编译它。 据我所知，Twitter Bootstrap 应用 LESS。 另一方面，!default 实际上是 Sass 的一部分，用于提供 Sass 变量 ($var) 默认值，这会使它在给定的上下文中有效，即便在 Sass 中也是如此。 此外，我在 LESS 文档中找不到任何对 !default 的援用，据我所知，它是 Sass 独有的。 你确定你在 Bootstrap 的源代码中找到了这个，而不是在其余中央？ 因为诚实说我不记得在 Bootstrap 的样式表中看到过 Sass/SCSS 代码。 ...

Sass 根本介绍[toc] 如果对本文有任何问题，倡议，或者在前端技术体系方面有任何问题，能够增加我的微信： drylint , 我会尽可能为你解答，也会拉你进入前端技术进阶交换群，大家一起提高~Sass 是 CSS 的超集，反对所有 css 语法，并在其根底上扩大。 Sass 反对像 css 一样的大括号语法，文件扩大名为 .scss ，以及另一种应用缩进的语法，文件扩大名为 .sass 。 教程次要采取齐全兼容 css 的 SCSS 语法。 正文（Comments）反对两种正文，别离是： 单行正文 // 正文文字多行正文 /* 正文文字 */单行正文（Single-line comments）编译的时候会间接被疏忽，不会编译到 CSS 中，所以也叫做“隐式正文”（silent comments）。 // 正文内容多行正文（Multi-line comments）编译时会将正文编译到 css 中，所以也叫做“显式正文”（loud comment） // 这一行正文不会呈现在编译的 css 中/* 这一行会呈现在编译的 css 中，除非是在压缩模式下则不会 *//* 正文中还能够蕴含插值: * 1 + 1 = #{1 + 1} *//*! 这行正文即便在压缩模式下也会编译到 css 中 */p /* 多行正文能够写在任何 * 容许空白呈现的中央 */ .sans { font-size: 16px;}编译后的 css： ...

装置 scssnpm install sass-loader@10.1.1 --save-devnpm install node-sass --sava-dev留神：sass-loader须要指定@10的版本，因为后续的版本在vue-cli脚手架中会呈现一些问题根底应用<style lang="scss" scoped> .xxxx { .xxx-x { ... } }</style>大部分场景下，应用scss能够实现下面的款式嵌套层级关系，置信大家都用过。上面要说下scss的进阶用法。scss 全局变量和mixin。 环境配置想要在vue-cli中全局应用 scss的全局变量和 @mixin款式混入，须要装置插件，而后在 vue.conf.js 中配置npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-devvue.config.js  中配置 module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ // 门路依据具体需要更改 path.resolve(__dirname, 'src/assets/styles/variables.scss'), path.resolve(__dirname, 'src/assets/styles/mixin.scss') ] } }}scss全局变量的应用上述环境配置中配置的 variables.scss 就是全局的变量文件variables.scss  $--color-primary: #468fff;$--color-primary-active: #69a5ff;xxx.vue 文件中间接应用该变量 <style lang="scss" scoped>.main-wrap { background: $--color-primary;}</style>@mixin与@include实现css编程式格调mixin.scss @mixin 函数名($参数名: 默认值) @mixin flex($justify-content: center, $align-center: center, $flex-direction: row){ display: flex; justify-content: $justify-content; align-items: $align-center; flex-direction: $flex-direction;}xxx.vue 中应用应用 @include 进行援用即可 ...

明天在做页面的时候，须要做一个默认 a 标签文字的色彩，而后当 hover 的时候，a 标签文字的色彩进行一个变动。 举例来说， 默认的款式写的时候，用的是 a:link { color: blue }； 当 hover 的时候，写的款式是 a:hover { color: red }; 起初发现，hover 的时候款式没有失效。 之后去搜网页查找了没有失效的起因，大部分的都是形容的是因为 a 标签的 4 种状态写的程序不对引起的，即 LOVE HATE 准则： a:link a:visited a:hover a:active； 起初校对了一下，我写的程序也是正确的，即：a:link , a:hover 前面把浏览器的 F12 模式的设施调试去掉了，即勾销勾选设施图标： 而后发现 a:hover 款式就失效了。 起初明确为什么 a:hover 的款式不失效了。因为我间接始终在应用浏览器的设施调试模式，应用的是 iPhone 调试模式： 导致 a:hover 没有失效。起初勾销设施调试模式后，当鼠标挪动到 a 标签下面的时候，就能够失常款式变动了。 所以，最初的总结是：应用 a:hover 的时候，或者其余元素应用 hover 的时候，肯定要留神是不是在模仿挪动设施的场景，如果是，那 hover 就不会失效；如果想看 hover 失效的款式，务必勾销挪动设施调试的模式。