slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
SASS מודלרי עם CSS PowerPoint Presentation
Download Presentation
SASS מודלרי עם CSS

Loading in 2 Seconds...

play fullscreen
1 / 11

SASS מודלרי עם CSS - PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on

SASS מודלרי עם CSS. אהרן שטיין. פיצול " עיצובים כלליים " ל -mixins ותחומים. Files: Pages. body.front-page { #main { .panel-col-first { } .panel-col-last { } } }. file: Blocks. @mixin block-pane-article-promoted { .pane-article-promoted{

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'SASS מודלרי עם CSS' - susane


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

SASS מודלרי עם CSS

אהרן שטיין

slide2

פיצול "עיצובים כלליים"

ל-mixins ותחומים

Files: Pages

body.front-page{

#main {

.panel-col-first { }

.panel-col-last { }

}

}

file: Blocks

@mixin block-pane-article-promoted {

.pane-article-promoted{

// ..........................

}

}

@mixin block-pane-opinions-list-opinions {

.pane-opinions-list-opinions-pane{

// ..........................

}

}

@mixin block-news-flash {

}

Main - [index]

file: Elements

/*-----------------------------------------------

Elements

-----------------------------------------------*/

@import "partials/blocks-regions/elements";

@include element-selection;

@include element-links;

@include element-node-unpublished;

//@include element-ajax-progress;

/*-----------------------------------------------

Blocks

-----------------------------------------------*/

@import "partials/blocks-regions/blocks";

@include block-pane-article-promoted;

@include block-pane-opinions-list-opinions;

@include block-pane-ih-lobby-topstory;

@include block-news-flash;

@include block news-flash-mobile;

body.front{

@include block-most-popular;

}

/*-----------------------------------------------

Pages

-----------------------------------------------*/

@import "partials/pages/home-page";

@import "partials/pages/article";

@import "partials/pages/video-page";

@import "partials/pages/search-page";

@mixin element-selection {

::selection {

background: #e4e5e7;

}

}

@mixin element-links {

a, a:link, a:visited, a:active {

color: #000; text-decoration: none;

}

}

@mixin element-ajax-progress {

….

}

Element

Blocks

יתרונות:

- יכולת התמצאות בקוד.

- אפשרות תחזקה

ושינויים גבוהה יותר

היות וכל קטע נכתב לעצמו.

Pages

slide3

@mixin layout {

}

@mixin responsive {

@media (max-width:800) {

}

@media (max-width: 500) {

}

}

@mixin search-box {

#search-box {

}

}

@mixin search-form {

.pane-advanced-search{

}

}

@mixin search-list {

.pane-search-list {

}

}

----------------------------------------------------

----------------------------------------------------

body.page-ih-search {

#main{

@include search-box;

@include layout;

}

.panel-col-top .pane-page-title{

}

.panel-col-first{

@include search-form;

@include search-list;

}

.panel-col-last{

}

@include responsive;

}

layout

responsive

search-box

search-form

search-list

Body - map

פיצול עיצוב "דף ספציפי"

יתרונות:

- יכולת התמצאות בקוד.

- אפשרות תחזקה ושינויים גבוהה יותר

היות וכל קטע הוא לעצמו.

slide4

@mixin image-label($font-size, $padding, $font-weight) {

position: absolute;

bottom: 0;

margin: 0;

left: 0;

padding: $padding;

font-size: $font-size;

font-weight: $font-weight;

width: 100%;

color: #fff;

background-color: rgba(#2b2b2b, 0.8);

&:empty{

padding: 0;

}

}

mixin קלאסי

יישום קטע CSS מספר פעמים,

ולעתים עם פרמטרים שונים.

.article-image{

label {

@include image-label(13px, 5px 10px);

border-top: 5px solid $red;

}

}

slide5

z

@mixin auto-overflow-hidden( $selector1, $selector2, $selector3 ) {

#{$selector1}{

overflow: hidden;

#{$selector2} {

position: relative;

z-index: 0;

#{$selector3}{

width: 100%;

position: absolute;

z-index: -1 !important;

padding-bottom: 9000%;

}

}

}

}

mixinלוגי / טריק

@include auto-overflow-hidden( '#main-inner', '#sidebar-second', '.background' );

#sidebar-first.background {

width: 100%;

margin-right: 8%;

background-color: $light-gray;

}

1

@include auto-overflow-hidden( '.panel-panel.top-right', '.panel-panel.top-first .inside', '.background' );

.panel-panel.top-first .background {

width: 100%; background-color: $light-gray;

}

.panel-panel.top-second {

background-color: #fff !important;

}

2

יתרונות: יישום ושיכפול קל של הלוגיקה או הטריק.

slide6

לעטוף גם עיצוב בסיסי ב- mixins

@mixin blockt-size( $width, $height, $margin, $padding ) {

width: $width;

height: $height;

margin: $margin;

padding: $padding;

}

@mixin views-rows( $width, $margin-left, $padding-left ) {

.view-content {

display: table;

.views-row{

width: $width;

margin-left: $margin-left;

padding-left: $padding-left;

display: table-cell;

float: right;

}

.views-row.views-row-last{

float: left;

margin-left: 0;

padding-left: 0;

background-image: none;

}

}

}

.block .view-topstory {

@include block-size( 100%, 40px, 0 0 4px, 5px );

@include views-rows( 48%, 2%, 1% );

.views-row{

}

}

.block .topstory-view-top {

@include block-size( 250px, auto, 0, 5px 10px );

@include views-rows( 31%, 3.5%,1% );

.views-row{

}

}

יתרונות:

- קיצור הקוד והופך את כתיבת הCSS לכתיבת יישום פונקציות.

- ניהול נושא עיצובי באזור אחד.

- משמש גם כחלופה לתיעוד.

slide7

mixin ברמת עצם

הכללת מספר ביצועים ב-mixin אחד

יתרונות:

- משמש גם כחלופה לתיעוד.

- כל טיפול דריסות CSS ושינויים מתבצע מאחרי הקליעים.

#main { @include border-top; }

#sidebar-first { @include border-top; }

#sidebar-second { @include border-top; }

body.front {

#main {

width: 80%;

margin: 0 auto;

}

#sidebar-second { border-top: 0; }

}

@mixin border-top {

border: 0;

border-top: 5px solid red;

width: 100%;

}

80%

@mixin border-top( $status: display, $param: ' ' ) {

@if $status == display {

width: 100%;

border: 0;

border-top: 5px solid $red;

}

@if $status == hidden { border-top: 0; }

@if $param == small{ width: 80%; margin: 0 auto; }

}

100%

body.front {

#main {

@include border-top(override, small);

}

#sidebar-second {

@include border-top(hidden);

}

}

slide8

@mixin block-pane-ih-topstory($dispaly: top){

.pane-ih-topstory{

….....css

@if $dispaly == top {

.topstory-view-top{

@include object-article( block-big-tite-on-image );

}

.view-topstory.item-2{

@include object-article( teaser );

@include logic-views-rows( 48%, 2%, 1%, border-side );

}

.view-topstory.item-3{

@include logic-teaser-border( hidden, all );

@include object-article( block-tite-on-image );

@include logic-views-rows( 31%, 3.5%, none );

}

}

/*-- bottom --*/

@if $dispaly == bottom {

.topstory-view-top{

@include object-article( block-big );

}

.view-topstory{

@include object-article( block-tite-top );

}

.view-topstory.item-2{

@include logic-teaser-border( hidden, all );

@include logic-views-rows( 48%, 2%, 1%, none );

}

.view-topstory.item-3{

@include logic-teaser-border( hidden );

@include logic-views-rows( 31%, 3.5%, none);

}

}

}

}

--------------------------------------------------------------------

@include block-pane-ih-topstory( top );

@include block-pane-ih-topstory( bottom );

1

1

1

2

2

2

3

3

4

4

5

5

6

6

slide9

שילוב CSS חכם עם SASS

@mixin writer-created-comment-icon($status: new, $param: ' ' ) {

@if $status != override {

.writer { @include mini-writer; }

.video_icon { @include mini-video_icon; }

.comment-icon { @include mini-comment-icon; }

.created { ….. }

.video_icon + .created {

&:before { …... }

}

.created + .comment-icon { @include slash-before; }

.comment-icon + .video_icon { @include slash-before; }

.video_icon + .comment-icon { @include slash-before; }

}

@if $param == talkback-dark {

.comment-icon:after {

@include icons-smart-sprite(talkback-dark);

margin-top: -1px;

}

}

}

@mixin slash-before {

&:before {

content: "/";

font-size: 100%;

margin-left: 4px;

margin-right: 0px;

}

}

@mixin mini-writer {

float: none;

display: inline;

color: red;

font-weight: bold;

@include mini-slash-after;

}

@include writer-created-comment-icon(override, talkback-dark);

slide10

@include image-label(18px,3px 10px);

@include section-title(2px, #646464);

דוגמא ליישום הפרמטרים של - mixin

@include section-title(2px, red ,-35px);

@include section-title(2px, blue ,-35px);

slide11

1

הורדת ששון dev 3.x:

https://drupal.org/project/sasson

תמונות

4

יצירת sub theme:

2

“drush sns “name sub theme

התקנת compass:

sudo apt-get install rubygems

sudo gem install compass

5

הפעלת compass:

3

cd slites/all/themes/subTheme

slites/all/themes/subTheme$ compass watch

הוספת הקבצים לתיקיית:

Files:

slites/all/themes/-sasson-

6

תחילת עבודה:

הפעלת ערכת העיצוב דרך דרופל: