সাস

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

কন্ট্রিবিউটর

শেয়ার করুন

প্রিন্ট করুন

সাধারণ

ভেরিয়েবল
```
$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`;
```

ম্যাথ

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

কন্ডিশনাল

```
$test: 3;
```
```
p { @if $test < 5 {color: blue;} }
```

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

মিক্সিন

@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); }
```

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

```
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 )
```

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

```
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 )
```

বিবিধ ফাংশন

```
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(...)
```

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

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

নেস্টিং

```
.some-class { &.another-class{} }
```

.parent { color: red;.child {color: blue;} }

.button { &:visited {}&:hover {}&:active {} }

.markdown-body{ p{ color: blue } &:hover{ color: red } }

লুপ

$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);} }

কালার ফাংশনস

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
```

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

```
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 )
```

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

```
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)
```