CSS & SASS & SCSS & less
CSS & SASS & SCSS & less
less vs scss
https://github.com/vecerek/less2sass/wiki/Less-vs.-Sass
https://www.smashingmagazine.com/2011/09/an-introduction-to-less-and-comparison-to-sass/
https://stackoverflow.com/questions/52003198/different-between-scss-and-less
https://www.keycdn.com/blog/sass-vs-less
https://www.ionos.com/digitalguide/websites/web-development/sass/
- LESS is written in JavaScript so you will need
NodeJS
to run it.
2.To run Sass, you will need to have Ruby
installed.
sass
scss
https://sass-lang.com/
https://github.com/sass
https://sass-lang.com/dart-sass
https://github.com/sass/dart-sass
less
https://webpack.docschina.org/loaders/less-loader/
$ npm install -g less
$ lessc styles.less styles.css
// Color Variables
@green: #2ecc71;
@lightgray: lightgray;
@background: whitesmoke;
// Layout only!
body {
background: @background;
h1 {
text-align: center;
color: gray;
}
h2 {
text-align: center;
color: gray;
}
}
// Starts Here!
.inactiveMixin {
content: "";
position: absolute;
display: block;
}
.beforeAnimation {
-moz-transition: .2s cubic-bezier(.24, 0, .5, 1);
-o-transition: .2s cubic-bezier(.24, 0, .5, 1);
-webkit-transition: .2s cubic-bezier(.24, 0, .5, 1);
transition: .2s cubic-bezier(.24, 0, .5, 1);
}
.afterAnimation {
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
-moz-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
-o-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
-webkit-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
transition: .35s cubic-bezier(.54, 1.60, .5, 1);
}
// Mobile Toggle Switch
.toggleWrapper {
margin: auto;
padding: 20px;
width: 55px;
border: 1px solid @lightgray;
margin-top: 20px;
border-radius: 5px;
background: white;
input {
&.mobileToggle {
opacity: 0; // hides checkbox
// opacity: 1;
position: absolute;
& + label {
position: relative;
display: inline-block;
user-select: none;
-moz-transition: .4s ease;
-o-transition: .4s ease;
-webkit-transition: .4s ease;
transition: .4s ease;
-webkit-tap-highlight-color: transparent;
height: 30px;
width: 50px;
border: 1px solid #e4e4e4;
border-radius: 60px;
&:before {
.inactiveMixin;
.beforeAnimation;
height: 30px;
width: 51px;
top: 0;
left: 0;
border-radius: 30px;
}
&:after {
.inactiveMixin;
.afterAnimation;
background: @background;
height: 28px;
width: 28px;
top: 1px;
left: 0px;
border-radius: 60px;
}
}
// When Active
&:checked {
& + label:before {
background: @green; // Active Color
-moz-transition: width .2s cubic-bezier(0, 0, 0, .1);
-o-transition: width .2s cubic-bezier(0, 0, 0, .1);
-webkit-transition: width .2s cubic-bezier(0, 0, 0, .1);
transition: width .2s cubic-bezier(0, 0, 0, .1);
}
& + label:after {
left: 54px - 30px;
}
}
}
}
}
https://codepen.io/xgqfrms/pen/BgYaeM
refs
https://github.com/xgqfrms-GitHub/Sass/tree/master/Tutorial#伪类-hover-伪元素before--after
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
CSS & SASS & SCSS & less的更多相关文章
- CSS, Sass, SCSS 关系
Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数,以加强和提升CSS. 它有很多很好的特性,但 ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- vue2.0以上版本安装sass(scss)
一.首先说明sass和scss的区别. 1.异同:1)简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力.语法形式上有些许不同,最主要的就是sass是靠缩进表 ...
- Sass & Scss & CSS3
Sass & Scss & CSS3 Sass & Scss @mixin & @include & @import & variable https: ...
- 「Vue」vue-cli 3.0集成sass/scss到vue项目
vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Pleas ...
- Less、Sass/Scss
一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...
随机推荐
- 【PostgreSQL】PostgreSQL数据库浅析
前言 工作中数据库用的不多,大部分都是简单查询一下了事,某项目中突然要求后端进行比较全面的数据库操作,现对自己学到的东西做一下总结. 简介 废话不多说,上官网地址: PostgreSQL 9.4.4 ...
- Map转换为格式化的YAML字符串
yaml与java对象的互转 yaml与java对象的互转有snakeyaml <dependency> <groupId>org.yaml</groupId> & ...
- linux 文件目录解释笔记(未完待续...)
目录 应放置档案内容 /bin 系统有很多放置执行档的目录,但/bin比较特殊.因为/bin放置的是在单人维护模式下还能够被操作的指令. 在/bin底下的指令可以被root与一般帐号所使用,主要有:c ...
- 使用两个FIFO完成流水操作
一.设计目标 写一个FIFO控制器,控制器里有两个FIFO,输入的数据由串行接收模块(uart_rx_module)送来,一共有86行86列的数据,按0.1.2行,1.2.3行,直到最后83.84.8 ...
- libuv事件循环
目录 1.说明 2.数据类型 2.1.uv_loop_t 2.2.uv_walk_cb 3.API 3.1.uv_loop_init 3.2.uv_loop_configure 3.3.uv_loop ...
- Flink-v1.12官方网站翻译-P006-Intro to the DataStream API
DataStream API介绍 本次培训的重点是广泛地介绍DataStream API,使你能够开始编写流媒体应用程序. 哪些数据可以流化? Flink的DataStream APIs for Ja ...
- Spring 的循环依赖,源码详细分析 → 真的非要三级缓存吗
开心一刻 吃完晚饭,坐在院子里和父亲聊天 父亲:你有什么人生追求? 我:金钱和美女 父亲对着我的头就是一丁弓,说道:小小年纪,怎么这么庸俗,重说一次 我:事业与爱情 父亲赞赏的摸了我的头,说道:嗯嗯, ...
- P3164 [CQOI2014]和谐矩阵(高斯消元 + bitset)
题意:构造一个$n*m$矩阵 使得每个元素和上下左右的xor值=0 题解:设第一行的每个元素值为未知数 可以依次得到每一行的值 然后把最后一行由题意条件 得到$m$个方程 高斯消元解一下 bitset ...
- Windows10 ping通 虚拟机上的Linux-CentOS7操作系统
我是按照Oracle VM VirtualBox 安装CentOS7操作系统这个博客安装Linux操作系统的. 我们这里只关心网卡的配置,网卡一: 网卡二: 我按照上面那个博客安装Linux操作系统之 ...
- Codeforces Round #697 (Div. 3) D. Cleaning the Phone (思维,前缀和)
题意:你的手机有\(n\)个app,每个app的大小为\(a_i\),现在你的手机空间快满了,你需要删掉总共至少\(m\)体积的app,每个app在你心中的珍惜值是\(b_i\),\(b_i\)的取值 ...