Showing posts with label SASS. Show all posts
Showing posts with label SASS. Show all posts

Wednesday, April 28, 2021

SASS, SCSS ? What is that ?

https://sass-lang.com/

https://sass-lang.com/guide - Variables, Nesting, Mixins, Partials, Modules, Inheritance, Operators



  • npm install -g sass
  • sass input.scss output.css 
  • sass --watch input.scss output.css


2 Types of Syntaxes
  • .scss - Brackets, Semicolon, More Popular
  • .saas - Indentation, Newline


When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files. 

---------------------------------------------------------------------------------------------------------------------------------------------------------------

https://dev.to/olawanle_joel/sass-vs-scss-odf

https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass/5654511#5654511

From the homepage of the language
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax.
 This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). 
Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS.
Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. 
Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
SASS is an interpreted language that spits out CSS. The structure of Sass looks like CSS (remotely), but it seems to me that the description is a bit misleading; it's not a replacement for CSS, or an extension. 
It's an interpreter which spits out CSS in the end, so Sass still has the limitations of normal CSS, but it masks them with simple code.

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------

Tuesday, January 5, 2021

Float, Flexbox, Grid, Bootstrap, CSS, Less, SASS

 Float  Flexbox Grid Bootstrap


Tables as layout ??? ---- Very Bad - Very Primitive

Next Option was ::Float::
Images /text - Float was originally designed for text to be wrapped around image

img  {
  float: left_Which side it goes
  clear : which_Side_They are not allowed
}


//h1 in general
h1 {
}

//h1 Nested inside div
div h1{
}

.greet , .welcome .{
font: ;
    color : black;
margin-
}


float when applied to div inside a section becomes responsive kind of 
and we get a layout, You also need holding Container 1st which will contain all div's.


<section>
<div> clear:both  ---- Top
<div> float: left   ---- Left
<div> float: none ---- Centre
<div> float:right  ---- Right
<div> clear:both  ---- Footer
<section>


Float Clear --> Flawed Logic  --> Hackish



-------------------------------------------------------------

Multiple classes on 1 element in Html attribute - space separated - Inside HTML


Inside .css File
Define Multiple Class  - Comma Separated - All styles shared by multiple classes
Nested Class - Space separated
Pseudo Classes  ??? ::after ?
Selectors ???
Less SASS CSS ???  


https://medium.com/@saanstone/understanding-css-precedence-specificity-d8ca24712417

https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css

https://www.w3schools.com/css/css_combinators.asp

Descendant vs Child Selector


Azure - Pipeline - Add Approver for Stage

https://learn.microsoft.com/en-us/azure/devops/pipelines/process/approvals?view=azure-devops&tabs=check-pass