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/

  1. 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

http://lesscss.org/

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的更多相关文章

  1. CSS, Sass, SCSS 关系

    Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数,以加强和提升CSS. 它有很多很好的特性,但 ...

  2. 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  3. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  4. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  5. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  6. vue2.0以上版本安装sass(scss)

    一.首先说明sass和scss的区别. 1.异同:1)简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力.语法形式上有些许不同,最主要的就是sass是靠缩进表 ...

  7. Sass & Scss & CSS3

    Sass & Scss & CSS3 Sass & Scss @mixin & @include & @import & variable https: ...

  8. 「Vue」vue-cli 3.0集成sass/scss到vue项目

    vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Pleas ...

  9. Less、Sass/Scss

    一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...

随机推荐

  1. 【PostgreSQL】PostgreSQL数据库浅析

    前言 工作中数据库用的不多,大部分都是简单查询一下了事,某项目中突然要求后端进行比较全面的数据库操作,现对自己学到的东西做一下总结. 简介 废话不多说,上官网地址: PostgreSQL 9.4.4 ...

  2. Map转换为格式化的YAML字符串

    yaml与java对象的互转 yaml与java对象的互转有snakeyaml <dependency> <groupId>org.yaml</groupId> & ...

  3. linux 文件目录解释笔记(未完待续...)

    目录 应放置档案内容 /bin 系统有很多放置执行档的目录,但/bin比较特殊.因为/bin放置的是在单人维护模式下还能够被操作的指令. 在/bin底下的指令可以被root与一般帐号所使用,主要有:c ...

  4. 使用两个FIFO完成流水操作

    一.设计目标 写一个FIFO控制器,控制器里有两个FIFO,输入的数据由串行接收模块(uart_rx_module)送来,一共有86行86列的数据,按0.1.2行,1.2.3行,直到最后83.84.8 ...

  5. 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 ...

  6. Flink-v1.12官方网站翻译-P006-Intro to the DataStream API

    DataStream API介绍 本次培训的重点是广泛地介绍DataStream API,使你能够开始编写流媒体应用程序. 哪些数据可以流化? Flink的DataStream APIs for Ja ...

  7. Spring 的循环依赖,源码详细分析 → 真的非要三级缓存吗

    开心一刻 吃完晚饭,坐在院子里和父亲聊天 父亲:你有什么人生追求? 我:金钱和美女 父亲对着我的头就是一丁弓,说道:小小年纪,怎么这么庸俗,重说一次 我:事业与爱情 父亲赞赏的摸了我的头,说道:嗯嗯, ...

  8. P3164 [CQOI2014]和谐矩阵(高斯消元 + bitset)

    题意:构造一个$n*m$矩阵 使得每个元素和上下左右的xor值=0 题解:设第一行的每个元素值为未知数 可以依次得到每一行的值 然后把最后一行由题意条件 得到$m$个方程 高斯消元解一下 bitset ...

  9. Windows10 ping通 虚拟机上的Linux-CentOS7操作系统

    我是按照Oracle VM VirtualBox 安装CentOS7操作系统这个博客安装Linux操作系统的. 我们这里只关心网卡的配置,网卡一: 网卡二: 我按照上面那个博客安装Linux操作系统之 ...

  10. Codeforces Round #697 (Div. 3) D. Cleaning the Phone (思维,前缀和)

    题意:你的手机有\(n\)个app,每个app的大小为\(a_i\),现在你的手机空间快满了,你需要删掉总共至少\(m\)体积的app,每个app在你心中的珍惜值是\(b_i\),\(b_i\)的取值 ...