We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system.We will set up Sass variables for the initial them and learn ho
转载
2021-03-03 12:51:14
829阅读
2评论
http://beautifytools.com/css-to-scss-converter.php CSS To SCSS Converter converts CSS to SCSS online. Enter your CSS and click convert to get SCSS cod
转载
2020-12-17 19:12:00
355阅读
2评论
gulp 插件之 gulp-clean-css 和 gulp-make-css-url-version
原创
2017-08-21 20:59:16
1562阅读
点赞
要想了解Scss 与 Sass 是什么以及他们的区别又在哪里，我们不过不先从他们各自的定义说起。Sass是什么Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的
转载
2024-02-05 00:33:03
34阅读
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。 SCSS即是SASS的新语法，是
转载
2016-11-02 19:48:00
269阅读
2评论
webpack.config.js: const path = require('path'); const autoprefixer = require('autoprefixer'); const cssnano = require('cssnano'); const MiniCssExtrac
原创
2022-06-05 00:33:09
282阅读
目前最主流的CSS预处理器：Sass(SCSS)(基于Ruby)、LESS(基于NodeJS)、Stylus Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量、嵌套、混合、导入等高级功能。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理样式文件，以及更高效地开发项目 特色功能完全兼容CSS3在CSS基础上增加变量、嵌套、混合等功能通过函数进行颜色值与
转载
2024-08-14 21:24:36
345阅读
gulp学习记录npm init -y yarn add gulp -D 修改 package.json "scripts": { "build": "gulp" }, // 查看版本 npx gulp --version 新建 gulpfile.js // 重命名 gulp-rename // 压
原创
2022-06-05 01:44:37
193阅读
1.CSS Cascading Style Sheets，层叠样式表。具体内容不再赘述。 2.LESS css的预处理器，为了解决一些css的弊端，和扩展一些更强大的功能，以及提高效率减少重复。 3.SCSS 同less，只不过功能更多些。（通常说的用的sass，其实是scss） 4.SASS 同s ...
转载
2021-08-26 18:46:00
300阅读
2评论
1.css优先级以及继承css具有两大特性：继承性和层叠性继承性继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。层叠性层叠性： 权重
今天继续说说gulp的watch，能够自己主动搞定非常多事情。不用每次都去敲命令了! 上次说到用gulp能够非常方便的进行css，js，html的压缩。而且能够对coffee和scss进行编译。 css，js。html一般在公布production时候压缩一次就能够，也就是敲一次gulp命令。可是c
转载
2017-07-02 21:25:00
19阅读
2评论
已经用了scss很久了，有时间来归纳一下。 目录1. 基本用法1.1 变量1.2 计算功能1.2.1 数字运算1.2.2 颜色值运算1.2.3 字符串运算1.2.4 布尔运算1.3 嵌套1.4 注释 /* */ 与 // (Comments: /* */ and //)2.代码的重用2.1 继承@extend2.2 混合指令 @mixin2.3 插入文件 @import3.1 循环语句3.2 自定
转载
2024-06-23 13:49:01
366阅读
首先回顾下css3中的@media 定义和使用： 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸
转载
2021-09-07 09:16:36
1498阅读
看起来这是未实现的，截至本文写作时：这是现在执行：CSS @import指令Sass现在更加明智地将@import指令编译为plain> CSS。 以下任何一种情况都会导致文字CSS @import：>导入一个.css扩展名的路径(例如@import“foo.css”)。导入一个媒体类型的路径(例如@import“foo”screen;)。导入一个HTTP路径(例如@import“ h
转载
2024-02-28 17:02:25
158阅读
文章目录介绍Sass是什么Scss是什么Scss 与 Sass异同为什么使用 Sass?Sass 安装NPM 安装(推荐使用)Windows 上安装Mac OS X (Homebrew)安装Sass 转化为 CSS转化步骤自动编译编译输出的CSS格式:nested：嵌套（默认格式）:compact：紧凑:expanded：扩展:compressed：压缩Sass 语法注释变量`$`嵌套1. 选择
转载
2024-06-08 17:15:27
276阅读
如下例子：#content article h1 { color: #333 }#content article p { m
原创
2022-04-12 16:18:50
190阅读
gulp只是提供一个框架给我们,如果我们想要实现一些更加复杂的功能.比如css压缩,那么我们还需要安装一下gulp-cssnano插件.gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)对css文件的处理,需要做的事情就是压缩,然后在将压缩
转载
2018-12-03 08:26:00
95阅读
2评论
想必大家学习CSS的时候一定接触过LESS和SASS吧，但可能还是有很多朋友对他们的概念模糊，下面不妨就跟着一起了解一下关于它们的故事。背景CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会
原创
2019-12-27 14:57:23
692阅读
CSS：最基本的样式表语言，适用于简单的样式需求。SCSS：CSS 的预处理器语言，提供了变量、嵌套、混合等高级特
一、CSS的单位html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。CSS中的单位是必须要写的，因为它没有默认单位。a、绝对单位1`in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。各种单位的含义：- `in`：英寸Inches (1 英寸 = 2.54 厘米)- `cm`：厘米Centimeters- `mm`：毫米Millimeters-
