+ Sass
null
王佳斌
商务合作请私信
展开
-
Less函数库大全
字符串函数(1)escape()功能:将输入字符串的url特殊字符进行编码处理不转义的编码:, / ? @ & + ’ ~ ! $转义的编码:# ^ ) ( } { | ; > < : ] [ =d:escape('#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =');(2)e()功能:css转义 用~“值”符号代替...原创 2019-05-10 19:48:49 · 6992 阅读 · 0 评论 -
less语法详解
Less为什么出现?作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。了解Less...原创 2019-06-16 18:26:18 · 11516 阅读 · 2 评论 -
Sass - 变量默认(!default)
基本使用如果分配给变量的值后面添加了 !default 标志 ,这意味着该变量如果已经赋值,那么它不会被重新赋值,但是,如果它尚未赋值,那么它会被赋予新的给定值。如果在此之前变量已经赋值,那就不使用默认值,如果没有赋值,则使用默认值。如果变量之前没有赋值,则使用默认值:/* 如果之前没有赋值,则使用默认值 */$const: "hello" !default;div{ co...原创 2019-09-23 15:47:20 · 10342 阅读 · 1 评论 -
Sass - 插值语法 / &
插值语法你可以通过 #{ } 插值语法在选择器和属性名中使用 Sass 的变量:/* $变量 */$name:button;$new-border:border-radius;*斜体样式*/* 插值表达式 */div > #{ $name } { #{ $new-border }:10px;}编译为CSS:div > button { border-r...原创 2019-09-22 19:14:36 · 3079 阅读 · 0 评论 -
Sass - 混入指令(@mixin)
前言为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在 Sass 中,除了 @import 和 @extend 可以使你的代码更加具有重复利用性,@mixin 指令也同样能提高你代码的重复使用率并简化你的代码。@extend通过继承从而简化了代码,但是它也有缺陷之处,首先是不够灵活,其次它还会将你不需要的其他地方具有相同类名的样式都继承过来(继承来的类添加了其他规则)。@mix...原创 2019-09-23 16:39:42 · 14511 阅读 · 6 评论 -
Sass - 变量($)
基本语法定义一个 Sass 变量非常简单,变量以美元符号($)开始,赋值像设置 CSS 属性一样:$new-color: rgb(255,0,0);然后,便可以使用该变量:div{ background: $new-color;}编译为CSS:div{ background: rgb(255,0,0)}局部变量几乎所有语言均存在局部变量与全局变量,当然 Sass ...原创 2019-09-21 17:20:48 · 4290 阅读 · 4 评论 -
Sass - 占位符选择器(%placeholder)
前言如果你已经了解了 @extend指令 则直接阅读即可,否则你需要先学习:传送门%占位符选择器语法:占位选择器看起来很像普通的 class 和 id 选择器,只是 # 或 . 被替换成了 %,他可以像 class 或者 id 选择器那样使用,需要注意的是,它本身的规则不会被编译到 CSS 文件中。%demo { /* 一些规则 */}初识占位符选择器它取代以前 CSS 中的...原创 2019-09-18 22:03:36 · 3331 阅读 · 0 评论 -
Sass - 嵌套属性(Nested Properties)
前言CSS中有一些属性遵循相同的 “命名空间” ,如以下CSS代码的 font 命名空间:a { font-family: '微软雅黑'; font-size: 14px; font-variant: small-caps; font-weight: bold;}其中,font-family、font-size、font-variant、font-weight 都在 fo...原创 2019-09-18 16:30:18 · 1689 阅读 · 1 评论 -
Sass - @extend指令
前言你是否遇到过这种情况:当一个样式类(class)含有另一个类的所有样式,并且它自己还有一些特定样式?例如:假设我们设计需要一个普通错误的样式和一个严重错误的样式:<!-- HTML --><div class="error seriousError"> Oh no! You've been hacked!</div>/* CSS */.e...原创 2019-09-18 15:38:22 · 2505 阅读 · 4 评论 -
sass文件监听出现UTF-8问题(Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8)
前言当 sass 文件监听时,出现以下错误:>>> Sass is watching for changes. Press Ctrl-C to stop. Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 Use --trace for backtrace.解...原创 2019-09-17 21:32:23 · 3193 阅读 · 0 评论 -
Sass环境搭建及使用测试(windows学习环境)
Ruby下载及安装Ruby官网:https://rubyinstaller.org/downloads/Sass编译依赖Ruby,因此第一步我们需要先安装Ruby:下载完成后双击安装,一路默认选项下一步,傻瓜式安装,安装后你会得到如图命令行工具:首次打开时,Ruby会让你安装一些东西,直接按照提示回车即可,最后得到如图界面:查看是否安装成功:ruby -v出现下图类似版本号,...原创 2019-09-17 21:48:22 · 1456 阅读 · 0 评论