STATUS OF THE SCSS CONTROL SYSTEM – FIRST PHASE OF AN 8GEV XFEL PROJECT IN SPRING-8
Using scss-at-noisestreet
-
Upload
wei-pin-teo -
Category
Technology
-
view
147 -
download
1
Transcript of Using scss-at-noisestreet
![Page 1: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/1.jpg)
SCSS: The Basics
![Page 2: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/2.jpg)
First Things First
SASS=SCSS. Sass is the name of the framework, while SCSS is basically the file extension name used for Sass. E.g. style.scss. They are often used interchangeably.
SCSS files are just CSS files with a .scss extension, i.e. you can still write your old css in an .scss file.
![Page 3: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/3.jpg)
Why Use SCSS?
1. Better Organization/Modularization of CSS files:
![Page 4: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/4.jpg)
It is possible to break down CSS into different files without using SCSS, but then:
1. It will be a pain to manually concatenate them into one or two files
2. If we do not concatenate them, and instead rely on the @import directive, then we will be making many HTTP requests to load the respective CSS, thus increasing load time.
![Page 5: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/5.jpg)
I.e. SCSS Concatenates Modularized
Files Automatically and Converts
Them into Valid CSS Files
![Page 6: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/6.jpg)
Why Use SCSS?
2. Able to use Variables with CSS
E.g. instead of copy-pasting the color #F89939 everywhere we need it, we do:
/* Define our custom orange color */
$yellow: #ffd320;
/* Use it anywhere */
.box {border:1px solid $yellow;}
div{background-color:$yellow;}
![Page 7: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/7.jpg)
Using variables also means: no more Find and Replace String if we decide to change property values:
/*Just change here:*/
$yellow: #ffce54;
/* And it's reflected everywhere */
.box {border:1px solid $yellow;}
div{background-color:$yellow;}
![Page 8: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/8.jpg)
I.e. SCSS Allows Use of Variables that Cuts Down Development Time
![Page 9: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/9.jpg)
Why Use SCSS?
3. Automatic minification of CSS files
4. Able to use standard math operations (+, -, *, /, and %) with CSS
5. Adjust colors within SCSS, e.g. darken($yellow, 20%);
6. Use arguments and functions, …
And More.
![Page 10: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/10.jpg)
Everyone Has to Come Onboard
E.g. Anthony writes this in his style.scss:
$yellow: #ffce54;
.button{background-color:$yellow;}
Which is converted into the following style.css:
.button{background-color:#ffce54;}
![Page 11: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/11.jpg)
Everyone Has to Come Onboard
Bhagaban doesn't use SCSS. Instead, he customizes directly on style.css:
.button{
font-size:10px;
background-color:#ffce54;
}
![Page 12: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/12.jpg)
Everyone Has to Come Onboard
Anthony isn't aware of that particular change, and continues working off his style.scss:
$yellow: #ffce54;
.button{color:#000;background-color:$yellow;}
Which is converted to the following css:
.button{color:#000;background-color:#ffce54;}
...hence overwriting Bhagaban's font-size:10px; without knowing it.
![Page 13: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/13.jpg)
It's Easy to Use SCSS NOW
1. With Ruby already installed on Mac, all we need is:
gem install sassgem install sass
2. Instead of editing a CSS file, we now edit a .SCSS file. Either I pass you the SCSS file I started off, or you can simply save your CSS file with .SCSS extension. (Every valid CSS rule is valid SCSS, so if you are lazy to learn SCSS syntax at first, you can write CSS on a .SCSS file.)
![Page 14: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/14.jpg)
It's Easy to use SCSS NOW
3. Let Sass watch over your file:
sass --watch sass --watch
stylesheets/scss/app.scssstylesheets/scss/app.scss
::
stylesheets/css/app.cssstylesheets/css/app.css
Which basically means Sass will convert all your .scss files inside the scss/ folder into valid CSS files inside the css/ folder automatically, without you worrying over it.
![Page 15: Using scss-at-noisestreet](https://reader035.fdocuments.in/reader035/viewer/2022081511/554be6d9b4c9055a368b4a3c/html5/thumbnails/15.jpg)
Questions?