https://github.com/mukhriddin-dev/sass-starter-2023

sass-starter-2023
https://github.com/mukhriddin-dev/sass-starter-2023

sass sass-mixins scss

Last synced: 17 days ago
JSON representation

sass-starter-2023

• Host: GitHub
• URL: https://github.com/mukhriddin-dev/sass-starter-2023
• Owner: mukhriddin-dev
• Created: 2023-12-08T03:14:17.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-08T05:54:55.000Z (about 1 year ago)
• Last Synced: 2024-10-31T09:27:48.467Z (2 months ago)
• Topics: sass, sass-mixins, scss
• Language: SCSS
• Homepage:
• Size: 40 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
### SCSS starter 



###  FOLDER STRUCTRE 



- ### assets 

>

- images

- fonst

 


 - ### css

> 

- style.css      (expaned)

- style.min.css  (minified)

 


 - ### public

 > 

- favicon      (folder)

- robots.txt  (SEO)

 


 - ### scss

 > 

- all  (folder)     (layout.scss , ETC)

- robots.txt  (SEO)



### Variables

```

$varName: value;

for example: 👉 $text-color: red;



```

### Nested in BEM

```

for example: 👉

index.html



   


       

       inner child

      

   



style.scss

.parent{

 width:100%;

 padding:50px;

   &__child{

      width:300px;

      height:300px;

      background:teal;

      

      &-inner{

        color: $text-color;

        font-size:20px;

      }

   } 

}

```



### Extends

```

%extendName{

    property:value;

    ...

    ..

    .

}

.className{

    @extand %extendName;

}

```



### Mixins

```

@mixin mixinName($arg1, arg2, ....){

    property1:$arg1;

    property2:$arg2;

    color:red;

    ...

    ..

    .

}

.className{

    @include mixnName(value1, value2 , ...);

}

```