随笔分类 - Sass
摘要:@use 'sass:math'; @use 'sass:string'; html { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100%; width: 100%; over
阅读全文
摘要:For example, we have single selector and multi selector: <div class="form-group"> <label for="standard-select">Standard Select</label> <div class="for
阅读全文
摘要: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
阅读全文
摘要:Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update
阅读全文
摘要:@mixin generateModifers($property) { #{$property}: $padding; &-large { #{$property}: $padding-large; } &-medium { #{$property}: 1.5rem; } &-small { #{$property}: $nordea-pa...
阅读全文
摘要:More from https://sass-lang.com/documentation/functions/map How to use:
阅读全文
摘要:In this lesson, you will learn how to iteratively generate CSS selectors and attributes using Sass loops. We will create a gradient of 100 elements, e
阅读全文
摘要:We will learn how to convert variable arguments by using rest operator in JavaScript. Scss "$shadows..." the same as "...shadows" in Javascript. inter
阅读全文
摘要:1. Pure CSS 2. Responsive 3. No need to recalculate on resize or font’s load event 4. Cross browser
阅读全文
摘要:Writing SCSS @functions is similar to writing functions in other programming languages; they can accept arguments and have return statements. SCSS pro
阅读全文
摘要:The SCSS @for directive is great when we know how many iterations are required and we only need 1 variable. What if we need multiple variables to iter
阅读全文
摘要:Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only
阅读全文
摘要:We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?Ext
阅读全文
摘要:Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included
阅读全文
摘要: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 ran
阅读全文
摘要:SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us unde
阅读全文
摘要:Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our
阅读全文
摘要:This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin w
阅读全文
摘要:Check the page:http://www.cssarrowplease.com/ In HTML: {{type}} is tow way binding in Angular, three types: text, data, voice <div class="chart-area {
阅读全文
摘要:NESTED MEDIA QUERIESOur stylesheet contains a responsive breakpoint with some alterations to.factory. Let's clean up the media query a bit by nesting ...
阅读全文