sass helper

sass.css

https://sass-lang.com/guide
https://sass-scss.ru/guide/

/*** Setup watcher in IDE ***/
/usr/local/bin/scss

--no-cache
--update
--sourcemap=none
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

$ProjectFileDir$/css/$FileNameWithoutExtension$.css
/* Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment: */


/*** About architecture, 7-1 SASS Architecture ***/
/* https: //kiranworkspace.com/sass-architecture/ */
/* https: //levelup.gitconnected.com/advance-your-css-with-sass-bem-7-1-architecture-13898751976 */


/*** Comments ***/
// This comment won't be included in the CSS.
   This is also commented out.

/* But this comment will, except in compressed mode.

/* It can also contain interpolation:
   1 + 1 = #{1 + 1}

/*! This comment will be included even in compressed mode.

p .sans
  font: Helvetica, /* Inline comments must be closed. */ sans-serif



/*** Variables ***/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
/* It could be wise to define all global variables in its own file, named "_globals.scss" */
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
$myColor: red;
$fz: 100px;

!global /* indicates that a variable is global */

body {
  font: 100% $font-stack;
  color: $primary-color;
  font-size: $fz;
}

h1 {
  $myColor: green !global;
  color: $myColor;
}



/* Using CSS custom properties (variables) this is CSS3 property */
/* define a property */
element {
  --main-bg-color: brown;
}
/* A common best practice is to define custom properties on the :root pseudo-class */
:root {
  --main-bg-color: brown;
}

/* access variable */
a {
  color: var(--bs-blue);
}




/*** Nesting ***/
/* https://www.w3schools.com/sass/sass_nesting.asp */
/* nav li {display: inline-block;} */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover{   // & - parent element, will be a:hover{}
      color: green;
    }

    .block &{ // .block a
      font-size: 100px;
    }
  }
}

link {
  color:#333;

  &:hover{ // link:hover
    color: #000;
  }
  &.custom{ // link.custom
    color:red;
  }
}

/* pseudolement, pseudoclase */
/* simbolul & include valoarea parinte sau clasa parinte */
/* https://sass-scss.ru/documentation/rasshirenie_css/ssilka_na_roditelya_selektora/ */

nav{
  &:hover{}
}
/* css */
nav:hover{}

/* another example */
nav{
  &.block--big{}
}
/* css */
.nav.block--big{}

/* sass */
#main {
  &-sidebar { border: 1px solid; }
}
/* css */
#main-sidebar {
  border: 1px solid;
}



/* Nested Properties */
/* https://sass-scss.ru/documentation/rasshirenie_css/vlozhennie_svoistva/ */
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

/* Output */
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;



/*** Partials - fragmentarea ***/
/* 
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. 
This is a great way to modularize your CSS and help keep things easier to maintain. 
*/
/* A partial is a Sass file named with a leading underscore. */
_partial.scss
@use


/*** Modules ***/
/* 
You don't have to write all your Sass in a single file. You can split it up however you want with the @use rule.
@use rule. This rule loads another Sass file as a module, When you use a file you don't need to include the file extension.  
*/
_base.scss  (another file with underscore)
@use 'base' (connect _base.scss file)



/*** Mixins @mixin and @include ***/
/* The @mixin directive lets you create CSS code that is to be reused throughout the website. */
/* The @include directive is created to let you use (include) the mixin. */
/* A good use of a mixin is for vendor prefixes. */
/* https://www.w3schools.com/sass/sass_mixin_include.asp */

@mixin name {
  property: value;
  property: value;
  ...
}

/*  Hyphens and underscores are considered to be the same, important-text { } and important_text { } are considered as the same mixin! */
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

/* Using a Mixin For Vendor Prefixes */
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

/* The @include directive is used to include a mixin. */
/* Passing Variables to a Mixin */
.box { @include transform(rotate(30deg)); }

selector {
  @include mixin-name;
}

/* result in css */
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}



/*** Extend/Inheritance, Templates ***/
/* This is one of the most useful features of Sass. */

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended.  */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}



/*** Operators ***/
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

/* css */
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}


/*** Media ***/
@media (min-width: 768px) and (max-width: 887px) {
  padding: 2.5rem 2.5rem 4rem 2.5rem;
}