Cara Membuat Struktur Import Baris Kode CSS By SASS

by | Apr 5, 2017 | CSS, HTML, Tips dan Trik, Tutorial | 0 comments

Struktur tampilan baris kode (baris program) pada suatu aplikasi akan berbeda dengan tampilan pada layar user dengan kondisi dibelakang sebuah tampilan website/aplikasi, mungkin ada beberapa programmer yang suka dengan baris programnya terlihat rapi bertujuan untuk memudahkan programmer dalam mencari bug atau error yang tak terduga, dan ada juga programmer yang tidak mau pusing dan tidak mau terlihat rapi terkesan masa bodo dengan baris program yang ada, kali ini saya akan membahas tentang Cara Membuat Struktur Import Baris Kode CSS By SASS

cara yang ke dua itu sebaiknya tidak di tiru yah, karena akan mendapatkan kesulitan jika sewaktu – waktu ada pengembangan aplikasi atau terjadi bug pada aplikasi maka programmer akan kesulitan dalam menyelesaikan masalahnya, berikut adalah Bagaimana kita Membuat Struktur Import Baris Kode CSS By SASS, caranya sangat mudah teman teman ikuti langkah ini yah :

  1. Buat folder bernama SASS didalamnya terdapat folder assets dan diluar folder asset buat file bernama intro.html dan style.css
  2. masukan script intro.html dibawah sini : 
    <html>
<head>
	<meta charset="UTF-8">
	<title>Belajar SASS</title>
	<link rel="stylesheet" href="style.css" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">
</head>
<body>
	<div class="container">
		<header>
			<h1>Dumet School</h1>		
		</header>
		<menu>
			<ul>
				<li><a href="">BERANDA</a></li>
				<li><a href="">PROFIL</a></li>
				<li><a href="">SERVICE</a></li>
				<li><a href="">KONTAK</a></li>
				<li><a href="">ABOUT US</a></li>
			</ul>
		</menu>
		<article>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae dignissimos pariatur maiores, similique, blanditiis a inventore tempore nostrum quaerat incidunt autem tempora dolor magnam dolorum aut ullam, vitae debitis?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque, quo deserunt quibusdam et magnam nihil odio reprehenderit, amet provident repellat cumque sequi ratione molestiae itaque. Deserunt beatae quo reprehenderit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae dignissimos pariatur maiores, similique, blanditiis a inventore tempore nostrum quaerat incidunt autem tempora dolor magnam dolorum aut ullam, vitae debitis?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque, quo deserunt quibusdam et magnam nihil odio reprehenderit, amet provident repellat cumque sequi ratione molestiae itaque. Deserunt beatae quo reprehenderit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae dignissimos pariatur maiores, similique, blanditiis a inventore tempore nostrum quaerat incidunt autem tempora dolor magnam dolorum aut ullam, vitae debitis?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque, quo deserunt quibusdam et magnam nihil odio reprehenderit, amet provident repellat cumque sequi ratione molestiae itaque. Deserunt beatae quo reprehenderit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae dignissimos pariatur maiores, similique, blanditiis a inventore tempore nostrum quaerat incidunt autem tempora dolor magnam dolorum aut ullam, vitae debitis?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque, quo deserunt quibusdam et magnam nihil odio reprehenderit, amet provident repellat cumque sequi ratione molestiae itaque. Deserunt beatae quo reprehenderit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae dignissimos pariatur maiores, similique, blanditiis a inventore tempore nostrum quaerat incidunt autem tempora dolor magnam dolorum aut ullam, vitae debitis?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque, quo deserunt quibusdam et magnam nihil odio reprehenderit, amet provident repellat cumque sequi ratione molestiae itaque. Deserunt beatae quo reprehenderit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos molestiae dignissimos pariatur maiores, similique, blanditiis a inventore tempore nostrum quaerat incidunt autem tempora dolor magnam dolorum aut ullam, vitae debitis?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque, quo deserunt quibusdam et magnam nihil odio reprehenderit, amet provident repellat cumque sequi ratione molestiae itaque. Deserunt beatae quo reprehenderit!</p>
		</article>
		<footer>
			<p>IsmetMA &copy; 2017</p>
		</footer>
	</div>
	
</body>
</html>

    style.css nya biarkan dikaos

  3. Didalam folder assets terdapat folder kelas dan diluar folder kelas terdapat file main.scss
  4. lalu masukkan script main.scss 
    @import 'kelas/variable';
@import 'kelas/layout';
  5. Didalam folder kelas buat file baru bernama _layout.scss dan _variable.scss
  6. lalu masukkan script _layout.scss dibawah sini : 
    body {padding: $reset; margin: $reset}

h1 {
	
	font-family : $font-gaya;
	font-size: $font-gede;
	color : $warna_font;
}

header {
	
	background: $warna;
	padding : $padding;
}

menu {
	
	background : $hijau;
	padding : $padding;
	height: 20px;
	margin-top:0;
}

menu {

	ul{
		li{
			a{
				color : #fff;
				text-decoration: none;
				font-weight: bold;
				&:hover{
					color: $warna ;
				}
			}
		}
	}
}

menu ul li {
	

	float: $float_left;
	width: $width150;
	list-style: none;
}

article {
	border:1px solid #eee;
	padding:$padding;
	width: 700px;
	margin:auto;
	text-align: justify;
}

footer {
	margin-top: $padding;
	background: blue;
	color:#fff;
	padding: $padding;
}

    dan _variable.scss :

    $font-gaya : 'Macondo', cursive;
$font-gede : 30px;
$warna : red;
$reset : 0;
$warna_font: #fff;
$hijau : green;
$padding: 20px;
$float_left : left;
$float_right : right;
$width100: 100%;
$width150 : 150px;

    lalu tulisakan di commandprompt seperti ini

  7. :Cara Membuat Struktur Import Baris Kode CSS By SASS
  8. Selesai

Jika sudah save dan coba jalankan, cukup mudah bukan? sekian tutorial tentang Bagaimana Cara Membuat Struktur Import Baris Kode CSS By SASS, sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA