Skip to content

Instantly share code, notes, and snippets.

@rajaramtt

rajaramtt/Sass.md

Last active May 29, 2021 09:10
Show Gist options
  • Save rajaramtt/8c4a174b27d3747204c8d8d73d48c32a to your computer and use it in GitHub Desktop.
Save rajaramtt/8c4a174b27d3747204c8d8d73d48c32a to your computer and use it in GitHub Desktop.
Download ZIP
Sass (which stands for Syntactically Awesome Style Sheets) is an extension to CSS
Raw
Sass.md

Sass (which stands for Syntactically Awesome Style Sheets) is an extension to CSS.

sass is superset of css Sass is syntatic sugar of css It helps in writing CSS quickly.

SASS supports two syntaxes namely SCSS and Indented syntax

  • The SCSS - is an extension of CSS syntax. files use the extension .scss.

  • Indented − This is older syntax and sometimes just called as SASS. files use the extension .sass.

Referance:

http://sebastianpontow.de/css2compass/ https://www.sassmeister.com/

Sass File Strcture

Referance: https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4


sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Forms
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
– main.scss              // Main Sass file

Main.scss: This file should only contain your imports! For example..

@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/slider';

@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

Note: There’s no need to include the _ or .scss file extension when importing.

Referance URL : https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4 https://github.com/HugoGiraudel/sass-boilerplate

Or we used bellow approch in application

 
 scss/
|
|– mixins/
|   |– _mixins.scss
|
|– placeholders/
|   |– __placeholders.scss
|
|– variables/
|   |–_colors.scss
|   |–_fonts.scss
|   |– _image-url.scss
|   |– _variables.scss(includes colors, fonts and images)
|
|
|– pages/
|   |– _home.scss
|   |_ styles.scss(Global styles)
|
|
 – main.scss

Comments

SCSS

// This comment won't be included in the CSS.

/* 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 /* Multi-line comments can be written anywhere
   * whitespace is allowed. */ .sans {
  font: Helvetica, // So can single-line commments.
        sans-serif;
}

CSS

/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
 * 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
  font: Helvetica, sans-serif;
}

Special Functions

url()

CSS will be accept quoted or unquoted URL but SassScript won't allow the unquoted url'

$roboto-font-path: "../fonts/roboto";
@font-face {
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");
    font-family: "Roboto";
    font-weight: 100;
}
calc()
//SCSS 
.logo {
  $width: 800px;
  width: $width;
  position: absolute;
  left: calc(50% - #{$width / 2}); // 
  top: 0;
}

//CSS 
.logo {
  width: 800px;
  position: absolute;
  left: calc(50% - 400px);
  top: 0;
}

min() and max()

.sidebar {
  // Since these refer to a Sass variable without interpolation, they call
  // Sass's built-in max() function.
  padding-left: max($padding, 20px);
  padding-right: max($padding, 20px);
}

//CSS
.sidebar {
  padding-left: 20px;
  padding-right: 20px;
}
calc() Function //   width: calc(100% - 100px);



:root {
  --main-bg-color: coral; 
}

#div1 {
  background-color: var(--main-bg-color); 
}

The env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function

env(safe-area-inset-top, 20px);

Variables

Variables are a way to store information that you want to reuse throughout your stylesheet. They allow us to store values for colors, fonts or really any CSS value that you want to reuse.

$color-primary: #ffff00; //yellow
body {
  background-color: $color-primary;
}

Sass variables, like all Sass identifiers, treat hyphens and underscores as identical. This means that $font-size and $font_size both refer to the same variable.

### Default Values
 allow your users to customize your library’s variables before you use them to generate CSS

// _library.scss
$black: #000 !default;
// style.scss
$black: #222;
$border-radius: 0.1rem;

@import 'library';

Scope

Variables declared at the top level of a stylesheet are global. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

Shadowing

Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global.

The !global flag may only be used to set a variable that has already been declared at the top level of a file. It may not be used to declare a new variable

$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

Flow Control Scope

Variables in flow control scope can assign to existing variables in the outer scope, but they can’t declare new variables there. Make sure the variable is already declared before you assign to it, even if you need to declare it as null.

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

Advanced Variable Functions

The variable-exists() function returns whether a variable with the given name exists in the current scope, and the global-variable-exists() function does the same but only for the global scope.

Is define a map from names to values that you can then access using variables.

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map-get($theme-colors, "warning");
}

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Import

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.

// _reset.scss
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

. This means that reset-list and reset_list both refer to the same mixin

Keyword Arguments

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}

Optional Arguments

@mixin replace-text($image, $x: 50%, $y: 50%) {

Content Blocks

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

A content block is lexically scoped, which means it can only see local variables in the scope where the mixin is included. It can’t see any variables that are defined in the mixin it’s passed to, even if they’re defined before the content block is invoked.

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}
@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

Extend/Inheritance

his is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.

/* 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;
}

@function

Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet.

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}
.sidebar {
  float: left;
  margin-left: 64px;
}

@error

When writing mixins and functions that take arguments, you usually want to ensure that those arguments have the types and formats your API expects. If they aren't, the user needs to be notified and your mixin/function needs to stop running.

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

@warn

The @warn rule is designed just for that. It’s written @warn and it prints the value of the expression (usually a string) for the user, along with a stack trace indicating how the current mixin or function was called. Unlike the @error rule, though, it doesn’t stop Sass entirely.

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }

@debug

@debug , and it prints the value of that expression, along with the filename and line number.

  @debug "divider offset: #{$divider-offset}";
  
//  test.scss:3 Debug: divider offset: 132px

@at-root

The @at-root rule is usually written @at-root { ... } and causes everything within it to be emitted at the root of the document instead of using the normal nesting.

@if and @else

@mixin theme-colors($light-theme: true) {
 @if $light-theme {
   background-color: $light-background;
   color: $light-text;
 } @else {
   background-color: $dark-background;
   color: $dark-text;
 }
}

@each

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
 .icon-#{$size} {
   font-size: $size;
   height: $size;
   width: $size;
 }
}

@for

@for $i from 1 through 3 {
 ul:nth-child(3n + #{$i}) {
   background-color: lighten($base-color, $i * 5%);
 }
}
ul:nth-child(3n + 1) {
 background-color: #004080;
}

ul:nth-child(3n + 2) {
 background-color: #004d99;
}

ul:nth-child(3n + 3) {
 background-color: #0059b3;
}

@while

Maps

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
 .icon-#{$name}:before {
   display: inline-block;
   font-family: "Icon Font";
   content: $glyph;
 }
}


@mixin breakpoint-only-screen($breakpoint, $direction) {
  @if $direction == max {
      @media only screen and (max-width: $breakpoint) {
          @content;
      }
  }
  @else if $direction == min {
      @media only screen and (min-width: $breakpoint) {
          @content;
      }
  }
}

@mixin breakpoint-screen($breakpoint, $direction) {
  @if $direction == max {
      @media screen and (max-width: $breakpoint) {
          @content;
      }
  }
  @else if $direction == min {
      @media screen and (min-width: $breakpoint) {
          @content;
      }
  }
}

@mixin breakpoint($breakpoint, $direction) {
  @if $direction == max {
      @media (max-width: $breakpoint) {
          @content;
      }
  }
  @else if $direction == min {
      @media (min-width: $breakpoint) {
          @content;
      }
  }
}
.spacer {
  @include breakpoint-only-screen(600px, min) {
      margin-bottom: 20px;
  }
}

.checkbox {
@include breakpoint-screen(500px, max) {
  font-size: 10px;
}
}

@include breakpoint(750px, max) {
  .responsive_table {
      overflow-x: auto !important;
  }
  .mat-table {
      min-width: 750px;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment