[SCSS] Use Standard Built-in SCSS Functions for Common Operations
We can use javascript for color and opacity variations, math, list and map logic or to see if something exists. SCSS includes functions for a wide range of common use cases for logic in our styles. In this lesson we look at some of the more useful color functions to improve development velocity, readability, and simplify the code. Be sure to checkout all the SCSS functions: http://sass-lang.com/documentation/Sass/Script/Functions.html
- $base: #24ea12;
- $lighten_base: lighten($base, 25%);
- $darken_base: darken($base, 25%);
- $clb: complement($base);
- $cllb: complement($lighten_base);
- $cldb: complement($darken_base);
- $light-color: scale_color($base, $alpha: -50%);
- $dark-color: scale_color($base, $saturation: -35%);
- .base {
- background-color: $base;
- color: $clb;
- }
- .lighten_base {
- background-color: $lighten_base;
- color: $cllb;
- }
- .darken_base {
- background-color: $darken_base;
- color: $cldb;
- }
- .linear-gradient {
- background-image: linear-gradient($clb, $cllb, $cldb);
- color: mix($base, yellow, 25%);
- }
- .hover {
- background-image: linear-gradient($base, $lighten_base, $darken_base);
- color: mix($base, yellow, 25%);
- &:hover {
- color: transparentize(mix($base, yellow, 25%), .5); // based on given color, add 0.5 opacity
- }
- }
- .darken-color {
- color: $dark-color;
- }
- .lighten-color {
- color: $light-color;
- }
- .container {
- display: grid;
- grid-gap: 10px;
- grid-template-columns: 1fr 1fr 1fr;
- counter-reset: box;
- height: 100vh;
- }
- .box:before {
- counter-increment: box;
- font-size: 3em;
- content: counter(box);
- }
- .box {
- display: flex;
- justify-content: center;
- align-content: center;
- align-items: center;
- }
[SCSS] Use Standard Built-in SCSS Functions for Common Operations的更多相关文章
- 在vue-cli中如何安装scss,并全局引入scss
在vue-cli脚手架采用scss正确的使用姿势 步骤一: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev ...
- [SCSS] Reuse Styles with the SCSS @mixin Directive
Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mi ...
- Standard C++ Programming: Virtual Functions and Inlining
原文链接:http://www.drdobbs.com/cpp/standard-c-programming-virtual-functions/184403747 By Josée Lajoie a ...
- [SCSS] Reuse Styles with the SCSS @extend Directive
We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It dep ...
- 在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)
项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-d ...
- Data Types
原地址: Home / Database / Oracle Database Online Documentation 11g Release 2 (11.2) / Database Administ ...
- [SCSS] Write Custom Functions with the SCSS @function Directive
Writing SCSS @functions is similar to writing functions in other programming languages; they can acc ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- Ruby安装Scss
Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...
随机推荐
- BZOJ 1009 GT考试 (AC自动机 + 矩阵乘法加速dp)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1009 题意: 准考证号为\(n\)位数\(X_1X_2....X_n(0<=X_ ...
- Web页面转换成Word文件,利用wordXML
简介:处理流程表单数据以WordXML形式填充Word文档表格换行符丢失问题 //将前台收集的XML中“$”循环拆分成"<w:br/>" by pengyc 解决表格填 ...
- Five ways to maximize Java NIO and NIO.2--转
原文地址:http://www.javaworld.com/article/2078654/java-se/java-se-five-ways-to-maximize-java-nio-and-nio ...
- Spring中JDBCTemplate的入门
Spring是IOC和AOP的容器框架,一站式的框架 连接数据库的步骤:[必须会写] Spring当中如何配置连接数据库? 第一步配置核心配置文件: <?xml version="1. ...
- 淘宝分类导航条;纯css实现固定导航栏
效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 在安卓(手机)上运行 Ubuntu (Linux)
在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...
- 如何使用VS2008打开VS2010的解决方案
用记事本打开VS2010的SLN文件的修改开头代码: Microsoft Visual Studio Solution File, Format Version 11.00 # Visual Stud ...
- 洛谷 P2969 [USACO09DEC]音符Music Notes
P2969 [USACO09DEC]音符Music Notes 题目描述 FJ is going to teach his cows how to play a song. The song cons ...
- HTML中select的option设置selected="selected"无效的解决方式
今天遇到了一个奇葩问题,写HTML时有个select控件.通过设置option的selected="selected"竟然无效,可是在其它浏览器是能够的.问了一下Google大神, ...
- LaTeX indicator function(指示函数)(\mathbb {1} 不起作用)
问题说明: \mathbb字符的空心化显示仅对字符有效,对数字无效. 解决方法: 使用 bbm 包 \documentclass{article} \usepackage{bbm} \begin{do ...