7-1 Sass Architecture

PHOTO

Wed Apr 05 2023 08:49:39 GMT+0000 (Coordinated Universal Time)

Saved by @benjaminb #sass

sass/
|
|– abstracts/
|   |– _index.scss    # index file
|   |– _variables.scss    # Sass Variables
|   |– _mixins.scss       # Sass Mixins
|
|– vendors/
|   |– _index.scss    # index file
|   |– _bootstrap.scss    # Bootstrap
|
|– base/
|   |– _index.scss    # index file
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|
|– layout/
|   |– _index.scss    # index file
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|
|– components/
|   |– _index.scss    # index file
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|
|– pages/
|   |– _index.scss    # index file
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|
|– themes/
|   |– _index.scss    # index file
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|
 – main.scss              # Main Sass input file


main.scss should have 

@use "base";
@use "components";
@use "layout";
@use "utilities";
@use "variables";

package.json should have 
https://thinkdobecreate.com/articles/minimum-static-site-sass-setup/

https://thinkdobecreate.com/articles/minimum-static-site-sass-setup/

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

@benjaminb - Thu Jul 20 2023 21:27:20 GMT+0000 (Coordinated Universal Time)

touch _navigation.scss _grid.scss _header.scss _footer.scss _sidebar.scss _forms.scss

@benjaminb - Thu Jul 20 2023 21:28:26 GMT+0000 (Coordinated Universal Time)

touch _buttons.scss _carousel.scss _dropdown.scss _cover.scss

More like this

SASS

@benjaminb

7-1 Sass Architecture

@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

Sass (stylesheet language) Example

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

Sass (stylesheet language) - Wikipedia

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}

SASS Operations

/* 
Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings). 
*/

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}

/*
Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.
*/

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}

#elementtutorials #ht #css #java #javascript #php #sass #jquery #python

element Tutorials

https://elementtutorials.com/

#html #css #java #javasc #php #sass

http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javasc #php #sass

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML a tag</title>
</head>
<body>
<a href="https://www.elementtutorials.com/">ElementTutorials</a>
</body>
</html>

#html #css #java #javasc #php #sass

HTML address Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML address tag </title>
</head>
<body>
    <address>
        Written by <a href="mailto:hello@example.com">Alson</a>.<br> 
        Contact us at:<br>
        street NO:, Hollywood<br>
        USA
    </address>
</body>
</html>

#html #css #java #javascript #php #sass

http://www.elementtutorials.com//ref/abbr.html

#html #css #javasc #java #php #sass

http://www.elementtutorials.com//ref/area.html

#html #css #javasc #java #php #sass

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="/img/favicon.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

#html #css #javasc #java #php #sass

HTML article Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML article Tag</title>
</head>
<body>
    <article>
		<h1>Introduction to HTML</h1>
		<p>HTML is a markup language that is used for creating web pages.</p>
	</article>
</body>
</html>

Browse more snippets >>