1 / 11

SASS מודלרי עם CSS

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{

susane
Download Presentation

SASS מודלרי עם CSS

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SASS מודלרי עם CSS אהרן שטיין

  2. פיצול "עיצובים כלליים" ל-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

  3. @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 פיצול עיצוב "דף ספציפי" יתרונות: - יכולת התמצאות בקוד. - אפשרות תחזקה ושינויים גבוהה יותר היות וכל קטע הוא לעצמו.

  4. @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; } }

  5. 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 יתרונות: יישום ושיכפול קל של הלוגיקה או הטריק.

  6. לעטוף גם עיצוב בסיסי ב- 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 לכתיבת יישום פונקציות. - ניהול נושא עיצובי באזור אחד. - משמש גם כחלופה לתיעוד.

  7. 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); } }

  8. @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

  9. שילוב 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);

  10. @include image-label(18px,3px 10px); @include section-title(2px, #646464); דוגמא ליישום הפרמטרים של - mixin @include section-title(2px, red ,-35px); @include section-title(2px, blue ,-35px);

  11. 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 תחילת עבודה: הפעלת ערכת העיצוב דרך דרופל:

More Related