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

分类：SASS

scss 实现星星效果

木灵鱼儿 5月前 SASS

scss 实现星星效果

前言这个是无意间看到b站的一个视频，发现挺好的，css实现本身还不吃太高的配置，视频链接如下：【Sass实现星空效果【渡一教育】】教程中使用了scss的除法运算法，但是这个用法在新版本中已经弃用了，现在推荐使用math语法，如果你的scss版本是新版本的，比如1.77.1，使用这种方式会报错。教程配置Math语法支持在vite的scss中配置如下;// vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData:...

2280 1 2

函数 Math 星星

scss 自动生成margin和padding的class

木灵鱼儿 3年前 SASS

scss 自动生成margin和padding的class

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

2395 0 0

margin padding scss

sass 函数

木灵鱼儿 4年前 SASS

sass 函数

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

7815 0 0

sass 函数

@extend 继承

木灵鱼儿 4年前 SASS

@extend 继承

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

2618 0 0

@extend 继承

@mixin 和 @include

木灵鱼儿 4年前 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调用混入body { ...

3646 0 0

@mixin @include

@import

木灵鱼儿 4年前 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-s...

2390 0 0

嵌套

木灵鱼儿 4年前 SASS

嵌套

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

2802 0 0

sass嵌套

变量

木灵鱼儿 4年前 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 { $myColor: green...

2636 0 0

sass变量

分类：SASS

scss 实现星星效果

scss 自动生成margin和padding的class

sass 函数

@extend 继承

@mixin 和 @include

@import

嵌套

变量

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：SASS

scss 实现星星效果

scss 自动生成margin和padding的class

sass 函数

@extend 继承

@mixin 和 @include

@import

嵌套

变量

最近评论

博客文章RSS订阅

博客评论RSS订阅