全部 HTML CSS JavaScript javascript高性能 javascript语言精粹 SASS UNI-APP 重学前端锋利的JQuery 高级web标准解决方案 Bootstrap4 Layui 实例 konva库 UIKit LESS TypeScript 前端基础建设与架构设计模式 JavaScript模式前端功能你不知道的JavaScript

分类：SASS

scss 自动生成margin和padding的class

木灵鱼儿 2年前 SASS

scss 自动生成margin和padding的class

费了半天劲才搞懂了，scss的函数代码写的是真累啊，而且不知道为啥我的代码格式化会给我自动换一行，导致极度不美观。 //生成margin和padding $multiplier:4; //乘数 $dimensions:("p":"padding", "m":"margin"); //方向 $directions:("t":"top", "b":"bottom", "l":"left", "r":"right", "x":("left", "right"), "y":("top", "bottom"), "a":""); //四个方向 @each $dimKey, $dimVal in ...

1637 0 0

margin padding scss

sass 函数

木灵鱼儿 3年前 SASS

sass 函数

函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。文章来自：链接 1. 字符串函数 unquote（$string）：删除字符串中的引号； quote（$string）：给字符串添加引号； To-upper-case（$string）：将字符串小写字母转换为大写字母 To-lower-case（$string）：将字符串大写字母转换为小写字母（1） unquote（$string） unquote函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则...

7242 0 0

sass 函数

@extend 继承

木灵鱼儿 3年前 SASS

@extend 继承

sass支持继承css属性，一般来说，我们的css继承是从父元素继承一部分可以继承的属性，比如color，font啊，这些，但是如果我们书写一个button按钮，样式会复杂很多，我们会修改它的颜色，边框，内边距等等一系列的属性，但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改，而是单独建立一个class名来进行样式定制，但就是因为这样，后面如果还有多个button元素，我们可能会不断重复书写一些相同的代码。 sass可以通过@extend 去继承某一个class的属性，并且本身也能够进行变动。 .button-basic { borde...

2024 0 0

@extend 继承

@mixin 和 @include

木灵鱼儿 3年前 SASS

@mixin 和 @include

@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。定义一个混入 @mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; } 混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text 调用混入 bod...

2863 0 0

@mixin @include

@import

木灵鱼儿 3年前 SASS

@import

sass可以将文件分割成多个片段文件，并通过一个scss文件引入这些片段，从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性，它可以引入本地或者外部文件，但是会生成一个http的请求，这就会导致网页的css渲染会发生延迟。而sass也支持这个属性，但是它的作用远不止如此。 @import 假设我们现在有两个sass文件，一个是主要的style.scss，一个用于初始化的reset.scss文件，我们要在style中引入reset； @import "reset"; body { font-family: Helvetica, sans-serif;...

1819 0 0

嵌套

木灵鱼儿 3年前 SASS

嵌套

sass最大的也是最常用的功能就是嵌套了。 #nav { ul { color:red; } } 这种写法可以理解为： #nav ul { color:red; } 当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同...

2176 0 0

sass嵌套

变量

木灵鱼儿 3年前 SASS

变量

sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。字符串数字颜色值布尔值列表 null 值例子 $myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; } 变量也是有作用域的。 $myColor: red; h1 { $my...

2059 0 0

sass变量

分类：SASS

scss 自动生成margin和padding的class

sass 函数

@extend 继承

@mixin 和 @include

@import

嵌套

变量

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：SASS

scss 自动生成margin和padding的class

sass 函数

@extend 继承

@mixin 和 @include

@import

嵌套

变量

最近评论

博客文章RSS订阅

博客评论RSS订阅