ميكس ساس: حافظ على أوراق الأنماط الخاصة بك جافة

تتمثل إحدى مزاياي المفضلة لاستخدام Sass في أنها تجعل التشغيل الآلي لسير عمل تصميم الواجهة الأمامية أمرًا سهلاً. هناك العديد من أدوات JavaScript للعمل مع الملفات وأتمتة المهام الأخرى ، لكن إمكانيات المزج المدمجة في Sass تسمح للشخص بكتابة كود نمطي للواجهة الأمامية. في هذه المقالة ، قمت بإدراج عشرة من مزيج Sass المفضل لدي لأتمتة كتابة أنماط الويب.

هذه هي مزيج Sass التي أستخدمها في كل مشروع ويب أعمل عليه تقريبًا. هناك العديد من المقالات الشيقة مع بعض مزيج Sass المفيدة عبر الويب. هناك أيضًا عدد قليل من مكتبات Sass mixin الجيدة والتي تعد رائعة للمهام الأصغر ، مثل Bourbon. مكتبة mixin الرائعة الأخرى التي اشتقت منها بعض الخلطات أدناه هي Andy.

تتعامل الخلطات التي سأنتقل إليها في هذه المقالة مع ما يلي:

• تساؤلات الإعلام
• موضوعات ملونة
• عناصر التمركز
• كليرفكس
• أحجام خطوط متسقة
• انتقالات الرسوم المتحركة
• صور شبكية العين
• تدرجات سريعة
• الخطوط الخارجية
• حشو / هوامش سريعة

تساؤلات الإعلام

تتيح لك استعلامات الوسائط إضافة نقاط فاصل مخصصة بسهولة إلى أوراق الأنماط الخاصة بك ، وإضافة سلوك سريع الاستجابة مخصص داخل عنصر لنقاط فواصل مختلفة. ومع ذلك ، يمكن أن تصبح الاستعلامات عن وسائط ورقة الأنماط المتناثرة سببًا سريعًا للصداع ، خاصةً عندما يتعلق الأمر بالحفاظ عليها في المستقبل. مع مزيج Sass ، كل ذلك يمكن أن يتغير.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

مع تحديد هذه الخلطات ، يمكن استخدام الخلطات على النحو التالي:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

إنه يعمل بشكل مستقل بشكل رائع ، أو مع أطر شبكة أخرى مثل Bootstrap.

ستصدر عبارة if استعلام وسائط مضبوطًا على حجم شاشة معين اعتمادًا على اسم الحجم المقدم إلى mixin. سيسمح لك ذلك بتعديل سلوك سمات CSS الخاصة بك بسهولة وفقًا لذلك. يمكنك أيضًا تخصيص النقطة التي تريد تعديل سمات CSS فيها. عادةً ما تلتزم التخطيطات الأكثر استجابة بثلاثة أو أربعة أبعاد عرض شاشة محددة لضبط المحتوى عليها. يتوسع دائمًا تباين أحجام الشاشات والأجهزة والتطبيقات ، ولكن هناك اتجاه شائع يستخدمه العديد من مطوري الويب لتخطيطاتهم ؛ أحجام الشاشات الصغيرة للهواتف ، ومتوسطة الحجم للأجهزة اللوحية ، وكبيرة لأجهزة الكمبيوتر المحمولة ، وكبيرة جدًا لأجهزة الكمبيوتر المكتبية.

كمرجع ، نقاط الوسائط المستخدمة في Bootstrap v3 هي:

• أقصى عرض: 767 بكسل (أي شاشة يصل عرضها إلى 767 بكسل)
• الحد الأدنى للعرض: 768 بكسل (أي شاشة يزيد عرضها عن 768 بكسل)
• الحد الأدنى للعرض: 992 بكسل (أي شاشة يزيد عرضها عن 992 بكسل)
• الحد الأدنى للعرض: 1200 بكسل (أي شاشة يزيد عرضها عن 1200 بكسل)

ثيمات اللون

يساعد تحديد سمة اللون لاستخدامها في جميع أنحاء موقعك على توفير الوقت في الحصول على نفس الأجزاء الملونة من CSS على نفس عناصر HTML. إذا كنت تريد أن يكون لجميع أزرار div حدًا منقطًا ثابتًا يبلغ 1 بكسل ، فيمكنك بسهولة إضافة هذا إلى المظهر الخاص بك. سيسمح لك مزيج Sass هذا بتعيين العديد من متغيرات الألوان كما تريد ، والتأثير على العديد من الفئات كما تريد. يمكن أن تكون هذه أداة مفيدة لتوفير خيارات الألوان لشيء ما ، أو في أي وقت يكون لديك ميزة تؤثر على لون العديد من العناصر في وقت واحد. يوجد مقال رائع هنا يحتوي على مزيد من المعلومات حول العمل مع سمات الألوان في Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

بمجرد إعداد سمة لون متعمقة ، ستزيل 70٪ من التصميم المرتبط بالألوان إذا تم القيام به بشكل صحيح. أوصي أيضًا بفصل ملف .scss هذا عن ملفات .scss الأخرى ، وتضمين جميع متغيرات ألوان علامتك التجارية في نفس الملف.

سطر بسيط مثل:

 @include theme(theme-banana, yellow);

سوف تنبعث:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

عناصر التمركز

اعتمادًا على التخطيط الخاص بك ، هناك العديد من الطرق المختلفة لتوسيط عنصر في الأنماط الخاصة بك. تستخدم الطريقة أدناه تحديد الموضع المطلق وستسمح لك بتحديد العنصر الرأسي أو الأفقي أو كلاهما في المنتصف. سيحتاج العنصر الأصل إلى الموضع: نسبي. يتيح لك ذلك تحديد الموضع المركزي للعنصر بسهولة في سطرين من التعليمات البرمجية القصيرة.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

يعد هذا المزيج من أكثر الطرق تنوعًا لتوسيط المحتوى ، ولكن من الجدير بالذكر أن هناك العديد من الطرق المختلفة لتوسيط المحتوى الخاص بك ، وقد لا يكون هذا دائمًا هو الحل الأفضل. بناءً على نمط التخطيط الخاص بك والسماح بتوافق المتصفح ، قد ترغب في توسيط المحتوى الخاص بك بطريقة مختلفة. Flexbox هي أداة أخرى شائعة ومفيدة للغاية للمحاذاة ، على الرغم من أنها لا تدعمها المتصفحات القديمة بشكل كامل في الوقت الحالي. يمكن إجراء محاذاة النص والحاوية البسيطة بسهولة بدون هذا المزيج ، باستخدام خصائص css البسيطة. سيساعدك هذا أكثر عند إنشاء التخطيطات والعمل مع الحاويات داخل الحاويات الأخرى.

كليرفكس

قم بتطبيق خاصية clearfix css على العناصر بسرعة وفعالية. هناك الكثير من حلول clearfix حول الويب ، ويبدو أن هذا الخيار يعمل بشكل أفضل. كما أنه سهل الاستخدام بمجرد إنشاء Sass mixin.

سيستفيد هذا المزيج عندما يكون لديك محتوى يتحرك يمينًا أو يسارًا ، وتريد مسح المساحة الموجودة أسفل العنصر العائم لإدراج محتوى جديد أدناه.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

أحجام الخطوط المتسقة

قم بتعيين حجم خط rem في المستند الخاص بك ، لاستخدامه مع جميع عناصر النص الخاصة بك. هذه طريقة أفضل لتوسيع وتصغير الخطوط بدلاً من em. سيتركب استخدام em بناءً على سمات CSS الأخرى ، لكن rem سيزيد أو ينقص فقط بناءً على الحجم الذي تحدده في مستند HTML الخاص بك. سيؤدي فصل ملف .scss لجميع خطوط الطباعة الخاصة بك واستخدام mixin أدناه لتحديد أحجام الخطوط الافتراضية إلى أتمتة سير عمل تشفير الطباعة بشكل كبير.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

ينشئ هذا المزيج أيضًا احتياطيًا بالبكسل للمتصفحات التي لا تدعم rem (IE8 وما دونه). عندما لا يدعم المتصفح تغيير الحجم ، سيحسب المزيج مكافئ البكسل لحجم rem الأولي الذي قمت بتعيينه وإخراج قيم البكسل و rem للعنصر.

حيوية

حدد خصائص الرسوم المتحركة بسرعة وأضفها إلى عناصرك. حاليًا ، لا تزال خاصية CSS للرسوم المتحركة بحاجة إلى بادئات البائع ، لذلك سيضيف ذلك أيضًا إلى المزيج.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

سيضيف الجزء الأول من mixin بادئات البائع المناسبة اللازمة لتوافق المتصفح. يقوم القسم التالي بإعداده لإدخال السلاسل والخصائص المخصصة. القسم الأخير من mixin هو المكان الذي ستنشئ فيه اسم mixin الخاص بك (في هذه الحالة: fade-out) وحدد ما تريد أن يحدث في كل إطار رئيسي في الرسوم المتحركة. يعد إعداد المثال هذا أساسيًا للغاية ، ويمكنك إضافة تغييرات إلى أي نسبة مئوية من مدة الرسوم المتحركة.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

سيأخذ المثال هنا العنصر المستهدف عند 0٪ من الرسوم المتحركة (البداية) ، وينقل الخاصية من التعتيم الكامل (العتامة: 1 ؛) إلى عدم وجود عتامة ويختفي أساسًا (التعتيم: 0 ؛) عند 90٪ من الرسوم المتحركة . لذلك إذا قمت بتعيين الرسم المتحرك ليكون له جدول زمني مدته 5 ثوانٍ ، فسيختفي العنصر بعد 4.5 ثانية (90٪ من الرسوم المتحركة التي تبلغ 5 ثوانٍ). الخاصية الأخيرة التي أحددها في استخدام المزيج ("3") هي عدد مرات تكرار الرسوم المتحركة.

صور شبكية العين

أضف صورًا عالية الدقة إلى موقعك ، مع استخدام احتياطي للأجهزة التي لا تعرض صورًا عالية الدقة. عند استخدام صور شبكية العين ، أوصي بالضغط قدر الإمكان دون إتلاف الصورة. أداة جيدة لذلك هي TinyPNG (تدعم PNG و JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

سيسمح لك هذا المزيج بإضافة قاعدة في نفس المكان مثل خاصية CSS التي تحدد الصورة الأصلية.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

في السابق ، كان حل CSS الوحيد لذلك هو استخدام استعلامات الوسائط ، وكان هذا الحل أكثر نظافة وأسهل. لمزيد من الأفكار والأفكار حول هذا المزيج ، راجع هذا المقال.

تدرجات سريعة

أضف بسهولة تدرجات تحدد لون البداية ولون النهاية ونوع التدرج اللوني فقط. أضف جميع خصائص التدرج ويمكنك الاختيار حسب الحاجة. يسمح لك نوع التدرج بالاختيار من بين التدرج اللوني العمودي أو التدرج الأفقي أو التدرج اللوني الشعاعي (على شكل كروي).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

لن تضطر بعد الآن إلى تذكر بادئات البائع المختلفة وأوامر المعلمات لتنفيذ التدرجات.

 .foo { @include background-gradient(red, black, 'vertical'); }

الخطوط الخارجية

باستخدام خاصية CSS font-face ، يمكننا بسهولة إضافة الخطوط في دليل وتضمين جميع أنواع الخطوط. عند استخدام ملفات الخطوط ، فإن المتصفحات المختلفة لها توافق مختلف مع أنواع الملفات. يساعد هذا المزيج في حل ذلك باستخدام أي ملف خط ذي صلة في الدليل.

ما عليك سوى تضمين أي ملفات خط في دليل وإضافة علامة "include" في أنماطك ، والتي ستجمع جميع الملفات من المجلد الذي اخترته.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

سيهتم هذا المزيج بتحديد عناوين URL لتنسيق الخط البديل ، بما في ذلك الحلول الفردية الضرورية للتوافق مع الإصدارات السابقة.

الحشو والهوامش السريعة

السبب الرئيسي لاستخدام هذا هو أنني سأحذف خاصية حشو معينة ، مثل المساحة اليسرى في بعض الأحيان ، ولا أريد تعريفها. باستخدام خاصية Sass خالية ، يمكنك حذف خصائص المساحة المتروكة. تنطبق نفس القواعد على الهوامش.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

يمكن بعد ذلك استخدام المزج لاستبدال مجموعة من خصائص padding- * و margin- * في جميع أنحاء أوراق الأنماط الخاصة بك. يمكنك تضمين هذا المزيج بسرعة في أي عنصر وتحديد جوانب الحشو / الهوامش التي تريد تضمينها فقط. الحشو والهوامش من أكثر أنماط CSS استخدامًا المضافة إلى العناصر ، وسيؤدي توفير الوقت الصغير مثل هذا إلى إضافة المزيد بسرعة.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

يتم إحتوائه

يعد استخدام مزيج Sass مثل تلك الموضحة في هذه المقالة طريقة رائعة لجعل سير عملك أكثر كفاءة. ستساعدك هذه المزيجات المحددة على قضاء وقت أقل في مهام الويب الشائعة ، مما يمنحك مزيدًا من الوقت للتركيز على جوانب أخرى من المشروع تتطلب رؤية أكثر دقة ومهارة.

يمكن تثبيت Sass والعمل معه بعدة طرق ، وسيتضمن استخدام موجه الأوامر لتثبيت بعض المكتبات في مشروعك. تتمثل إحدى طرق تثبيت Sass في استخدام Ruby - كما هو موضح في موقع Sass الرئيسي هنا - وهناك طريقة أخرى شائعة وهي استخدام Node.js.

تمتد فوائد Sass إلى ما هو أبعد من الأتمتة ، ويمكن أن تساعد في إنشاء أوراق أنماط مشروعك وإدارتها بسهولة. حتى بعض مشاريع الويب الأساسية يمكن أن تحتوي على آلاف الأسطر من كود CSS. تعد Sass طريقة رائعة لتقسيم هذه الشفرة إلى أجزاء يمكن التحكم فيها ، ولكل منها تركيزه الخاص.