Download
1 / 11
120 likes | 258 Vues
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{
E N D
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{ // .......................... } } @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
@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 פיצול עיצוב "דף ספציפי" יתרונות: - יכולת התמצאות בקוד. - אפשרות תחזקה ושינויים גבוהה יותר היות וכל קטע הוא לעצמו.
@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; } }
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 יתרונות: יישום ושיכפול קל של הלוגיקה או הטריק.
לעטוף גם עיצוב בסיסי ב- 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 לכתיבת יישום פונקציות. - ניהול נושא עיצובי באזור אחד. - משמש גם כחלופה לתיעוד.
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); } }
@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
שילוב 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);
@include image-label(18px,3px 10px); @include section-title(2px, #646464); דוגמא ליישום הפרמטרים של - mixin @include section-title(2px, red ,-35px); @include section-title(2px, blue ,-35px);
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 תחילת עבודה: הפעלת ערכת העיצוב דרך דרופל:
