সাস

সাস(Sass) সিএসএস এর একটি এক্সটেনশন। এর দ্বারা নেস্টেড রুলস, ভেরিয়েবল, মিক্সিন, সিলেক্টর ইনহেরিটেন্স, ফাংশন, লুপ, কন্ডিশনস ইত্যাদি সহ আরো অনেক কিছু ব্যবহার করে আপনার সিএসএস কোড কে অর্গানিজ করতে সাহায্য করে।

সাধারণ

Link
  • ভেরিয়েবল

    $bg-color: #0022FF;
  • ভেরিয়েবল নাম্বার ডিক্লেয়ার

    $number: 20;
  • বুলিয়ান ভেরিয়েবল ডিক্লেয়ার

    $boolean: true;
  • স্ট্রিং ভেরিয়েবল ডিক্লেয়ার

    $string: 'string string';
  • লিস্ট ভেরিয়েবল ডিক্লেয়ার

    $list: 'Item', 'Item';
  • ভেরিয়েবল ব্যবহার

    color: $bg-color;
  • এক্সটেন্ড

    .foo{ color: red; } .bar { @extend .foo; }
  • কমেন্টস

    /* Block comments */ | // Line comments
  • ফাইল ইম্পোর্ট করতে

    @import './other_sass_file_name`;

ইন্টারপোলেশন

Link
  • .#{$klass} { ... }   // Class
  • call($function-name)   // Functions
  • @media #{$tablet}
  • font: #{$size}/#{$line-height}
  • url('#{$background}.jpg')

ম্যাথ

Link
  • $default-margin: 25px;
  • margin: random(100) * 1% 0;
  • padding: $default-margin * 2em;
  • line-height: (24 / 16);
  • width: $default-margin + 200px;
  • width: $default-margin/2;

নেস্টিং

Link
  • .some-class { &.another-class{} }
  • .parent { color: red;.child {color: blue;} }
  • .button { &:visited {}&:hover {}&:active {} }
  • .markdown-body{ p{ color: blue } &:hover{ color: red } }

কন্ডিশনাল

Link
  • $test: 3;
  • p { @if $test < 5 {color: blue;} }
  • p { @if $test < 5 {color: blue; @if $test == 3 {text-color: white;}} }

লুপ

Link
  • $i: 6; @while $i > 0 { .item-#{$i}{width: 2em * $i;}$i: $i - 2; }
  • @for $i from 1 through 5 {.list-#{$i}{width: 2px * $i;}}
  • @each $s in (normal, bold, italic) {.#{$s}{font-weight: $s;}}
  • $menu-items: home about services contact; @each $item in $menu-items { .photo-#{$item}{background: url('images/#{$item}.jpg');} }
  • $backgrounds: (home, 'home.jpg'), (about, 'about.jpg'); @each $id, $image in $backgrounds { .photo-#{$id}{background: url($image);} }

মিক্সিন

Link
  • @mixin heading-font {font-family: sans-serif;font-weight: bold;}
  • h1 { @include heading-font; }
  • @mixin font-size($n) { font-size: $n * 1.2em; }
  • body { @include font-size(2); }
  • @mixin pad($n: 10px) { padding: $n; }
  • body { @include pad(15px); }
  • $default-padding: 10px;
  • @mixin pad($n: $default-padding) { padding: $n; }
  • body { @include pad(15px); }

কালার ফাংশনস

Link
  • rgba কালার

    rgb( 100, 120, 140 ) | rgba( 100, 120, 140, .5 ) | rgba( $color, .5 )
  • HSLA ইন্ডিভিজুয়াল ভ্যালু

    hue( $color ) | saturation( $color ) | lightness( $color ) | alpha( $color )
  • RGB ইন্ডিভিজুয়াল ভ্যালু

    red( $color ) | green( $color ) | blue( $color )
  • কালার মিক্স

    mix( $a, $b, 10% )   // 10% a, 90% b

কালার ফাংশনস (HSLA পরিবর্তন করা)

Link
  • darken( $color, 5% )
  • lighten( $color, 5% )
  • saturate( $color, 5% )
  • desaturate( $color, 5% )
  • grayscale( $color )
  • adjust-hue( $color, 15deg )
  • complement( $color )
  • invert( $color )
  • fade-in( $color, .5 )
  • fade-out( $color, .5 )
  • rgba( $color, .5 )

কালার ফাংশনস (অ্যাডজাস্টমেন্ট)

Link
  • adjust-color( $color, $blue: 5 )
  • adjust-color( $color, $lightness: -30% )
  • adjust-color( $color, $alpha: -0.4 )
  • adjust-color( $color, $hue: 30deg )
  • scale-color( $color, $lightness: 50% )
  • change-color( $color, $hue: 180deg )
  • change-color( $color, $blue: 250 )

স্ট্রিং ফাংশন

Link
  • unquote( 'hello' )
  • quote( hello )
  • to-upper-case( hello )
  • to-lower-case( hello )
  • str-length( hello world )
  • str-slice( hello, 2, 5 )
  • str-insert( 'abcd', 'X', 1 )

ইউনিট ও নম্বর ফাংশন

Link
  • unit(3em)
  • unitless(100px)
  • floor(3.5)
  • ceil(3.5)
  • round(3.5)
  • abs(3.5)
  • min(1, 2, 3)
  • max(1, 2, 3)
  • percentage(.5)
  • random(3)

বিবিধ ফাংশন

Link
  • variable-exists(red)
  • mixin-exists(red-text)
  • function-exists(redify)
  • global-variable-exists(red)
  • selector-append('.menu', 'li', 'a')   // .menu li a
  • selector-nest('.menu', '&:hover li')  // .menu:hover li
  • selector-extend(...)
  • selector-parse(...)
  • selector-replace(...)
  • selector-unify(...)