随笔分类 - CSS
摘要：
在之前我们已经使用用 / 来进行计算，但如下情况不一样 例如 p{ font: 16px/30px Arial, Helvetica, sans-serif; } 如果需要使用变量，同时又要确保 / 不做除法运算，而是完整地编译到 CSS 文件中，这种情况怎么办？？？可以使用 #{} 插值语句将变量
阅读全文
在之前我们已经使用用 / 来进行计算，但如下情况不一样 例如 p{ font: 16px/30px Arial, Helvetica, sans-serif; } 如果需要使用变量，同时又要确保 / 不做除法运算，而是完整地编译到 CSS 文件中，这种情况怎么办？？？可以使用 #{} 插值语句将变量
阅读全文
摘要：
sass 运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用 赋值运算符 赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接
阅读全文
sass 运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用 赋值运算符 赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接
阅读全文
摘要：
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。 通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。 普通CSS的实现 接下来以警告框为例进行讲，解4种类型 | 类型 | 说明 | | | | | info | 信息！请注意
阅读全文
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。 通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。 普通CSS的实现 接下来以警告框为例进行讲，解4种类型 | 类型 | 说明 | | | | | info | 信息！请注意
阅读全文
摘要：
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
阅读全文
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
阅读全文
摘要：
@import Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 例如： public.scss $font-base-co
阅读全文
@import Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 例如： public.scss $font-base-co
阅读全文
摘要：
sass变量同javascript变量，可以用来存储一些信息，并且可以重复使用。
阅读全文
sass变量同javascript变量，可以用来存储一些信息，并且可以重复使用。
阅读全文
摘要：
语法嵌套规则 选择器嵌套 例如有这么一段css，正常CSS的写法 .container{width:1200px; margin: 0 auto;} .container .header{height: 90px; line-height: 90px;} .container .header .lo
阅读全文
语法嵌套规则 选择器嵌套 例如有这么一段css，正常CSS的写法 .container{width:1200px; margin: 0 auto;} .container .header{height: 90px; line-height: 90px;} .container .header .lo
阅读全文
摘要：
Sass编译输出的CSS格式可以自定义。
有4种输出格式：
- :nested – 嵌套格式
- :expanded – 展开格式
- :compact – 紧凑格式
- :compressed – 压缩格式
阅读全文
Sass编译输出的CSS格式可以自定义。
有4种输出格式：
- :nested – 嵌套格式
- :expanded – 展开格式
- :compact – 紧凑格式
- :compressed – 压缩格式
阅读全文
摘要：
VScode设置中文 打开vscode ，按快捷键“Ctrl+Shift+P” 输入configure language，回车 选择安装其他语言 （默认是英文的） 选择简体中安装（荧光笔标注的地方） 按提示重启 右下角会有安装成功提示，会有重启(restart)提示 按提示重启。 下载Live Sa
阅读全文
VScode设置中文 打开vscode ，按快捷键“Ctrl+Shift+P” 输入configure language，回车 选择安装其他语言 （默认是英文的） 选择简体中安装（荧光笔标注的地方） 按提示重启 右下角会有安装成功提示，会有重启(restart)提示 按提示重启。 下载Live Sa
阅读全文
摘要：
为什么会出现css预处理器 CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他的编程语法，css的
阅读全文
为什么会出现css预处理器 CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他的编程语法，css的
阅读全文
