SCSS
Scss is a preprocessor that allows us to use features that are not part of css standards, it also provides a good workflow to maintain our stylesheets.
Scss helps us to reduce our code and we don’t repeat our code often as we tend to do while using css as scss flows the principle of DRY(Don’t Repeat Yourself)
Parsing a Stylesheet
A stylesheet is parsed from a sequence of Unicode code points. It's parsed directly, without first being converted to a token stream.
Input Encoding
It’s often that a document is initially available only as a sequence of bytes, which is decoded into Unicode. Sass performs this decoding as follows:
-
If the sequence of bytes starts with the UTF-8 or UTF-16 encoding of U+FEFF BYTE ORDER MARK, the following encoding is used.
-
If the sequence of bytes starts with the plain ASCII string @charset, Sass determines the encoding using step 2 of the CSS algorithm for determining the fallback encoding.
-
Otherwise, we use UTF-8.
Parse Errors
When Sass encounters invalid syntax in a stylesheet, parsing will fail and an error will be shown to the user with information about the occurrence of the invalid syntax and the reason it was invalid.
Note that this is different from CSS, which specifies how to recover from most errors rather than failing immediately. This is one of the few cases where SCSS isn’t strictly a superset of CSS. However, it’s much more useful to Sass users to see errors immediately, rather than having them passed through to the CSS output.
Variables
We assign a value to a name that begins with $,and the we refer to the name instead of the value. The variable declaration looks like property declaration, To use a variable, just include it in a value.
scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}
sass
$border-dark: rgba($base-color, 0.88)
.alert border: 1px solid $border-darkcss
.alert {
border: 1px solid rgba(198, 83, 140, 0.88);
}Style Rules
Style rules are the basis of scss as they are for css, they work the same way as in css.
We choose the elements to style with the selector and declare the properties.
scss
.button {
padding: 3px 10px;
font-size: 12px;
border-radius: 3px;
border: 1px solid #e1e4e8;
}
sass
.button
padding: 3px 10px;
font-size: 12px;
border-radius: 3px;
border: 1px solid #e1e4e8;
padding: 3px 10px;
css
.button {
padding: 3px 10px;
font-size: 12px;
border-radius: 3px;
border: 1px solid #e1e4e8;
}
Nesting
Rather than repeating the same selectors again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.
scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Mixins
A few things in CSS are somewhat dreary to compose, particularly with CSS3 and the numerous seller prefixes that exist. A mixin lets you make groups of CSS declarations that you need to reuse all through your site. You can even go in qualities to make your mixin increasingly adaptable. A decent utilization of a mixin is for seller prefixes. Here's a model for change.
scss
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
css
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Folder Structure of SCSS
-
_base.scss
-
_layout.scss
-
_components.scss
-
Styles.scss
Here we have 3 partials connecting up to our styles.scss
Base: contained within this file are all your resets, variables, mixins, and any utility classes.
Layout: contains all the CSS that handles the layout, such as the container and any grid systems.
Components: anything reusable such as buttons, navbars, cards etc.
Main: it should ONLY contain the imports for the above files.
Conclusion
When styling or using frameworks and libraries of Javascript it is always feasible to use scss, it will help us to reduce our code and help us maintain the style in fine modules.
0 Comments:
Leave a Comments