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;
}

Github

[SCSS] Use Standard Built-in SCSS Functions for Common Operations的更多相关文章

  1. 在vue-cli中如何安装scss,并全局引入scss

    在vue-cli脚手架采用scss正确的使用姿势 步骤一: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev ...

  2. [SCSS] Reuse Styles with the SCSS @mixin Directive

    Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mi ...

  3. Standard C++ Programming: Virtual Functions and Inlining

    原文链接:http://www.drdobbs.com/cpp/standard-c-programming-virtual-functions/184403747 By Josée Lajoie a ...

  4. [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 ...

  5. 在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)

    项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-d ...

  6. Data Types

    原地址: Home / Database / Oracle Database Online Documentation 11g Release 2 (11.2) / Database Administ ...

  7. [SCSS] Write Custom Functions with the SCSS @function Directive

    Writing SCSS @functions is similar to writing functions in other programming languages; they can acc ...

  8. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  9. Ruby安装Scss

    Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...

随机推荐

  1. Java学习笔记九

    GUI:图形用户界面,Java不常用于创建桌面应用,所以用的比较少 一.概述: 二.Frame演示: 三.事件监听机制 import java.awt.Button; import java.awt. ...

  2. Vue的style与class

    1. style 可以通过 :style="{height:`${heightData.main}px`}" 实现样式的动态绑定, style绑定的是一个对象,多个样式时用“,”隔 ...

  3. 推广一下新Blog www.hrwhisper.me

    新博客地址:www.hrwhisper.me 欢迎互访加友链~

  4. yarn的安装和使用

    yarn的简介: Yarn是facebook发布的一款取代npm的包管理工具. yarn的特点: 速度超快. Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载. 同时利用并行下载以最大化资源 ...

  5. Docker+Mongodb

    原文:Docker+Mongodb docker search mongodb docker run -d -p 2701:27017 -v /usr/mongodb/data:/data/db  - ...

  6. 【LightOJ - 1205】Palindromic Numbers

    [链接]https://cn.vjudge.net/problem/LightOJ-1205 [题意] 求出L..R范围内的回文个数 [题解] 数位DP; 先求出1..x里面的回文串个数.则做一下前缀 ...

  7. 1.3 Quick Start中 Step 1: Download the code官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 不要局限于,这个版本,我只是以最新的版本,来做个引子,让大家对官网的各个kafka版 ...

  8. Flask项目之手机端租房网站的实战开发(三)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  9. STL之vector容器的实现框架

    说明:本文仅供学习交流,转载请标明出处,欢迎转载. 实现vector容器的思路等同于实现一个动态数组,以下我们參照源代码的相关资料,给出一个vector容器的大致框架,仅仅有声明,没给出详细的实现. ...

  10. 展示C代码覆盖率的gcovr工具简单介绍及相关命令使用演示样例

    (本人正在參加2015博客之星评选,诚邀你来投票,谢谢:username=zhouzxi">http://vote.blog.csdn.net/blogstar2015/candida ...