مقالات طراحي سايت

اپليكيشن كوالا رو نبنديد تنها بديدش زير و بذارين گشوده باشه تا هروقت كه تغييرات پوشه‌هاي scss رو باطن IDE خودتون save كرديد اين اپليكيشن خودش براتون پوشه رو كامپايل كنه و bootstrap.css رو تغيير‌و تحول بده. اكنون وقتشه با sass فعاليت كنيم. طراحي سايت در مشهد گفتيم كه پوشه‌هاي sass درون فايل stylesheet مي باشند. (bootstrap-sass-mastervendorassetsstylesheets). اين فايل رو گشوده نماييد و بعد از آن فولدر bootstrap.scss رو گشوده نمائيد. مي‌بينيد كه بوت استرپ كليه ي فولدر‌هاي sass رو كه باطن فايل bootstrap مي‌باشند اينجا ايمپورت كرده و ما ميتونيم با هركدوم كه فعاليت نداريم پاكشون كنيم و ديگه تو فولدر كامپايل گرديده ي css نميان. خط دوم اين فولدر، فولدر _variables.scss رو ايمپورت كرده. اين فولدر دربرگيرنده متغيرهايي مثل رنگها، فونت ها، اندازه ها، مسافت ها، اندازه هايي براي گرد كردن كناره‌ها و در مجموع مجموع متغيرهايي ميباشد كه درون ساير پوشه‌هاي sass مصرف شده بدين ترتيب در بالاترين خط قرار داره. هم اكنون پوشه _variables.scss كه باطن فايل bootstrap مي باشد رو گشوده فرماييد.  نكته : به صورت كلي همگي ي پوشه‌هاي sass كه بوت استرپ ازشون استعمال كرده درون اين فولدر bootstrap مي‌باشند پس هنگامي ميگم فلان فولدر Sass رو گشوده نماييد يعني بيايد تو اين فايل و بازشون فرمائيد. در ضمن پوشه bootstrap.scss درون فايل bootstrap رو هم حذف نمائيد، نيازي بهش وجود ندارد. بيايد يه نگاهي به محتوايت _variables.scss داشته باشيم: خب! اكنون ميخوايم بكگراند شيت رو عوض كنيم. در خط اوليه فولدر _variables.scss قراره متغيرهايي كه خودمون تعريف‌و‌تمجيد مي‌كنيم رو همپا يه كامنت مينويسيم كه بدونيم اين هارو خودمون اضافه كرديم. كد تحت رو بنويسيد تا رنگ دلخواه خودمون رو تعريف و تمجيد كنيم: // Mine $color-cream: #e3d6c0; // -------------------------------------------------- آن گاه مقدار متغير $body-bg رو از #fff به $color-cream تغيير‌و تحول ميديم. بنابراين رنگ دور‌نما ورقه عوض ميشه. رنگ متن ها هم كه دقيقا دو خط پس از $body-bg مي باشد به وسيله متغير $text-color رقم خورده و كاريش نداريم زيرا مقدارش همون مقدار متبوع ماست. رنگ لينكمون هم آبي رنگ مي‌باشد البته نميخوايم آبي رنگ باشه ميخوايم خاكستري باشه پس مقدار متغير $link-color رو از $brand-primary به $gray تغيير‌و تحول ميديم. مقدار $gray رو پيش از اين تو خط فراتر، خويش بوت استرپ معلوم كرده و ما صرفا ازش به كارگيري مي‌كنيم. درحال حاضر كه تغييراتمون رو انجام داديم يه ctrl+s مي زنيم تا فايلمون Save بشه. زيرا كوالا گشوده بود حال حاضر خودش فولدر bootstrap.scss رو كامپايل ميكنه و كافيه شما ورقه index.html رو مجدد گشوده نمائيد يا اين كه رفرش نماييد. در صورتي رنگ بكگراند body عوض نشده بود، دو سه توشه ctrl+f5 رو بزنيد صحيح ميشه. به نظرم براي اين نصيب كافيه. تو بخش بعدي گريد بندي بوت استرپ رو براتون توضيح ميدم و منوي بالاي تارنما رو هم صحيح مي كنيم.