{"id":15041421,"url":"https://github.com/othmanekahtal/code-correctly-sass","last_synced_at":"2025-04-14T20:20:40.558Z","repository":{"id":48925992,"uuid":"373851377","full_name":"othmanekahtal/code-correctly-sass","owner":"othmanekahtal","description":"Code Correctly SASS | SASS architecture","archived":false,"fork":false,"pushed_at":"2021-07-09T14:33:09.000Z","size":58,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T08:35:38.523Z","etag":null,"topics":["sass-framework"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/othmanekahtal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-04T13:31:31.000Z","updated_at":"2024-04-02T17:40:39.000Z","dependencies_parsed_at":"2022-09-26T20:21:33.145Z","dependency_job_id":null,"html_url":"https://github.com/othmanekahtal/code-correctly-sass","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othmanekahtal%2Fcode-correctly-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othmanekahtal%2Fcode-correctly-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othmanekahtal%2Fcode-correctly-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/othmanekahtal%2Fcode-correctly-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/othmanekahtal","download_url":"https://codeload.github.com/othmanekahtal/code-correctly-sass/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952345,"owners_count":21188427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sass-framework"],"created_at":"2024-09-24T20:46:05.212Z","updated_at":"2025-04-14T20:20:40.539Z","avatar_url":"https://github.com/othmanekahtal.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Correctly SASS\n\nyou can install package using npm command :\n\n`npm i code-correctly-sass`\n\nor read more about this package : https://www.npmjs.com/package/code-correctly-sass\n\n## Setup environment for sass :\n\n- for config and setup environment for sass automatically :\n\n  ```bash\n  npm i install\n  ```\n\n  You can config and setup environment manually :\n\n- 1- initialize npm for your project :\n\n  ```bash\n  npm init\n  ```\n\n- 2- install sass :\n\n  ```bash\n  npm i sass --save-dev\n  ```\n\n  to installing sass globally :\n\n  ```bash\n  npm i sass -g\n  ```\n\n- 3- install PostCSS-cli and autoprefixer (for auto prefixed your css to be supported in all browsers ):\n\n  ```bash\n  npm install postcss-cli autoprefixer --save-dev\n  ```\n\n- 5-install npm-run-all to run multiple npm-scripts in parallel or sequential:\n  ```bash\n  npm i npm-run-all --save-dev\n  ```\n\n## Getting started :\n\n### Explain 7-1 SASS architecture :\n\nIt is always a good idea to keep things organized, today let’s organize SASS code. It’s really good for Front-End Developers and especially for Big projects.\n\nLet me explain one of the best SASS architecture so-called 7-1 SASS architecture :\n\n`Abstracts\\ :`\n\n\u003e The abstract folder is different from other folders. Styles written in this folder do not compile to CSS. They are the helpers for other folders. Two major SASS Abstracts are variables,mixins,functions,placeholders,responsive rules,etc.\n\n`Base\\`\n\n\u003e The base folder is like a foundation style for the project,like a redefine rem unit and reset the style of the default HTML elements.\n\n`Layout\\`\n\n\u003e The layout folder contains the style for a website layout.This folder includes style for the navbar, sidebar, footer, header, etc.\n\n`Components\\`\n\n\u003e Components are a set of codes which has their character. It might be just one HTML element or a block of HTML elements.like : Alert box, button, label, badge, list group, panel, modal are some of the common components we see on websites.\n\n`Pages\\`\n\n\u003e The pages folder covers the style of specific pages. like a contact us,home,services,etc.\n\n`Themes\\`\n\n\u003e Themes folder is related to look of your project. It could be Light theme, dark theme, blue theme, etc..\n\n`Vendors\\`\n\n\u003e This Folder contains all external styles or 3rd party styles are placed in it. libraries,frameworks.\n\u003e The most commonly used vendors are Bootstrap,bulma,animate.css,tailwind.css,etc.\n\n`main.scss`\n\n\u003e This file is the main sass file,that's will converted to css\n\u003e this file contains an access for other files like a components and responsive rules and more..\n\n`When we have a web site contains a multi pages, we need to add sass file that contains components and requirement like: example_page.scss`\n\n### Start coding Now :\n\n\u003cbr\u003e\n\n**1-Development Mode :**\n\n- To watch all changes happens in sass architecture :\n\n  ```bash\n  npm sass --watch sass/:dist/\n  ```\n\n  or use :\n\n  ```bash\n  npm run watch:sass\n  ```\n\n- To compile sass to css :\n\n  ```bash\n  npm sass sass/:dist/\n  ```\n\n  or use :\n\n  ```bash\n  npm run compile:sass\n  ```\n\n- To auto prefix all css files :\n\n  ```bash\n  npx postcss --use autoprefixer dist/ -o dist/\n  ```\n\n  or use :\n\n  ```bash\n  npm run prefix:css\n  ```\n\n- To compress css files :\n\n  ```bash\n  npm sass dist/*.css dist/*.compress.css --style=compressed\n  ```\n\n  or use :\n\n  ```bash\n  npm run compress:css\n  ```\n\n- To build all files :\n\n  ```bash\n  npm npm-run-all compile:sass prefix:css compress:css\n  ```\n\n  or use :\n\n  ```bash\n  npm run build\n  ```\n\n## Contributing :\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.😉\n\n`enjoy !`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fothmanekahtal%2Fcode-correctly-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fothmanekahtal%2Fcode-correctly-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fothmanekahtal%2Fcode-correctly-sass/lists"}