Sass

Sass是一种CSS预处理语言。 首先要了解什么是CSS预处理器？ CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。 CSS预处理语言有Scss(Sass) 和Less、Postcss。 那么Scss和Sass有什么区别呢？ Sass 有两种语法规则(syntaxes)，目前新的语法规则（从 Sass 3开始）被称为 “SCSS”，它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别称为缩进语法（或者 Sass），它受到了Haml的简洁精炼的启发，它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号、分号，它使用行缩进的方式来指定css 块，虽然sass不是最原始的语法，但是缩进语法将继续被支持，在缩进语法的文件以.sass为拓展名。 特性概览： CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过Sass预处理器进行CSS的开发，Sass提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。 Scss的使用语法： ·注释： 注释分为三种：/* */css中显示，/

本节我们学习 Sass 中的混合，Sass 中的混合是通过 @mixin 指令来定义的，混合允许我们定义可以在整个样式表中重复使用的样式，避免使用无语意的类。混合可以包含所有的 CSS 规则和任何其他在 Sass 文档中被允许使用的内容。 定义混合 Sass 中可以通过 @mixin 指令定义混合， @mixin 后面接混合的名称和可选的 arguments 参数，以及混合的内容块。 示例： 例如创建一个名为 my-text 的混合： @mixin my-text { font-size: 12px; color: #fdef92; font-weight: bold; } 此时我们运行代码，上述混合是不会被编译到 CSS 代码中的，只有当我们使用了这个混合时，才会被编译。 注意，Sass 的连接符号 - 和下划线 _ 是相同的，也就是说 my-text 与 my_text 是一样的。 混合的使用 混合定义好后，我们就可以在选择器使用混合，可以通过 @include 来使用这混合。 @include 调用会把混合器中的所有样式提取出来放在 @include 被调用的地方。 示例： 例如我们使用上面定义好的混合： @mixin my-text { font-size: 12px; color: #fdef92; font-weight: bold; } p{ @include my

问题 Could not find an option named "cache-location". 如果你在Netbeans 10、11、12上使用基于libsass的任何一款SASS编译器来编译scss文件，比如来自 https://sass-lang.com 的sass编译器，你会遇到上面的那个问题，而且scss不会被编译。 导致问题的原因 简单的说，Netbeans 10、11、12被Apache incubator重构之后，与SASS集成的这部分功能是基于Ruby SASS来做的可用性测试，并非libsass。所以当你尝试使用基于libsass的SASS编译器时可能会出问题。 解决办法 解决办法很简单，就是在netbeans的启动参数中添加一个配置项，以在Netbeans上启用基于libsass的编译器。方法如下： 找到Netbeans.conf文件，此文件位于Netbeans安装目录下的etc文件夹中。<nb_install_dir>/netbeans/etc 在netbeans.conf文件中找到“netbeans_default_options”配置项。此项的配置参数众多，你只需要将用于激活libsass支持的配置参数放在最后面即可。如下所示： netbeans_default_options="-J-XX:+UseStringDeduplication -J

sass自定义函数转 sass预处理 在《 DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode 》与《 DarkMode(3)：深色模式解决方案——颜色反转与函数 》，如果使用 @mixin themeify { @each $theme-name, $theme-map in $themes { $theme-map: $theme-map !global; body[data-theme=#{$theme-name}] & { @content; } } } @function themed($key) { @return map-get($theme-map, $key); } 这种方案写出来的样式代码，在改为普通模式，非常难搞。 不过推荐使用正则表达式的方式，去替换 正对第一个函数，替换的正则表达式如下：\@include themeify \{\n([\s\w\:\-\"\(\)\;\$\!]*)\} const reg =/\@include themeify \{\n([\s\w\:\-\"\(\)\;\$\!]*)\}/ const reg = /@include themeify {\n([\s\w:\-"();$!]*)}/; 替换为$1即可 第二个函数正则表达:themed\(\"([\w\-]*)\"\)\; const reg

暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。 之前做不同颜色的皮肤，暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法，就是less、sass、post-css，把颜色抽离出变量。然后打包输出不同的样式，即： CSS预处理直接生成多套主题样式 利用Less，stylus 或 sass 的变量代替颜色值 配置多个主题颜色配置 利用grunt/gulp/webpack等工具输出多套主题样式 页面加载后，根据用户需求加载不同的样式列表 推荐阅读《 webpack 换肤功能多主题/配色样式打包解决方案 》，配置文件： https://github.com/hiyangguo/webpack-mutiple-theme-bundle-css-demo/blob/master/webpack.config.js 这里是以less 为例，sass 配置，稍微修改即可，这里就不做赘述了，google应该都可以搜索得到，推荐这篇也是顺手搜的 这种方式在bootstrap时代就流行开来，那时候还用过php编译less，以及java编译：java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css webpack

上文《DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode》，完全基于样色抽离变量，然后使用预处理其，生成两套样式。切换样式文件。 sass自定义函数与mixin指令实现暗黑模式 其实还是变量抽离，只是不是两个variable 变量文件，而是一个map文件。 首先声明函数 @mixin themeify { @each $theme-name, $theme-map in $themes { $theme-map: $theme-map !global; body[data-theme=#{$theme-name}] & { br/>@content; } } } @function themed($key) { @return map-get($theme-map, $key); } 样式代码 button { @mixin background($color) { @include themeify { background: themed($color) } } color: themify(accent-200); &:hover { background-color: themify(primary-100, 0.5); } } js切换样式 document.body.dataset.theme = newValue; 当然

一、报错情况 本地运行前端项目时，报这个错误。 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88) 二、问题排查 经排查，发现针对mac系统，有指定的node版本， https://github.com/sass/node-sass/releases/tag/v4.13.1 ，mac最高支持node13，而我新安装的Node版本已经到了15，所以只能使用nvm选择指定的node版本。 三、解决方案 MAC安装nvm，参考： https://www.cnblogs.com/giggle/p/7075548.html 然后使用nvm安装指定的node nvm install 12.16.2 brew install nvm 1.需要先指定node版本 nvm use 12.16.2 2.安装指定包 npm install 3.运行 npm run dev 来源： oschina 链接： https://my.oschina.net/u/4348132/blog/4793756