MDM Studio | Responsive Design
Compartilhe esta notícia no Facebook

Utilizando o Compass para compilar arquivos SaSS

Se já sabe o que é SaSS e como escreve-lo, mas está com dificuldades em implementar essa solução em seu projeto, confira esse tutorial! Estamos realizando o procedimento no Mac, mas é basicamente o mesmo para Linux e Windows.

Tutorial: criando um arquivo / projeto no Compass

Abra o Compass -> Create Compass Project -> Compass -> Project
 
Após realizar o procedimento acima, selecione (em seu projeto) onde quer criar a pasta contendo os estilos (o sass, o css e os arquivos de sistema do Compass)
 

Se tudo ocorrer bem, o Compass vai gerar um relatório de sucesso

			directory estilos/ 
			directory sass/ 
			directory stylesheets/ 
			   create config.rb 
			   create screen.scss 
			   create print.scss 
			   create ie.scss 
			   create stylesheets/ie.css 
			   create stylesheets/print.css 
			   create stylesheets/screen.css 

			*********************************************************************
			Congratulations! Your compass project has been created.

			You may now add and edit sass stylesheets in the sass subdirectory of your project.

			Sass files beginning with an underscore are called partials and won't be
			compiled to CSS, but they can be imported into other sass stylesheets.

			You can configure your project by editing the config.rb configuration file.

			You must compile your sass stylesheets into CSS when they change.
			This can be done in one of the following ways:
			  1. To compile on demand:
			     compass compile [path/to/project]
			  2. To monitor your project for changes and automatically recompile:
			     compass watch [path/to/project]

			More Resources:
			  * Website: http://compass-style.org/
			  * Sass: http://sass-lang.com
			  * Community: http://groups.google.com/group/compass-users/


			To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
			<head>
			  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
			  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
			  <!--[if IE]>
			      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
			  <![endif]-->
			</head>

		

Feito o processo, inclua a tag que importa o estilo CSS dentro de seu arquivo HTML (procedimento padrão, porém você vai apontar para o arquivo dentro da pasta CSS que o Compass está manipulando). Neste caso, a pasta "estilos" foi criada manualmente por nós (esse nome pode variar conforme o que você informar no momento da criação do projeto no Compass).

			  <link href="estilos/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
		
 

O último passo é "ouvir / assistir" as modificações feitas em seu arquivo através do Compass. Quando um projeto é criado do zero, ele passa a verificar o arquivo automaticamente. No caso de vc desligar seu computador e iniciar novamente o Compass (ou até mesmo alternar entre projetos), deve-se "ouvir / assistir" as alterações no arquivo com o comando "Watch", conforme imagem abaixo.

Compass -> Watch a folder
 
Selecione a pasta (que usamos em nosso exemplo) "estilos" e clique em abrir. Pronto, seu Compass está compilando seu SaSS e convertendo em CSS
 

Escreva seu código em HTML. Segue um exemplo abaixo:


	
		<html>
		<head>
		<title>Teste do Sass e Compass</title>
		<link href="estilos/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

		</head>

		<body>

		<div id="principal">

		<h1>Testando arquivos Sass</h1>
		<h2>Altere seu arquivo Sass, atualize seu HTML (refresh) e note o CSS sendo atualizado</h2>

		<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl risus, efficitur vel ornare ac, vestibulum nec ligula. Donec quis volutpat leo, vitae volutpat odio. In hac habitasse platea dictumst. Suspendisse sed felis lectus. Aenean sed metus eu ex tristique feugiat sed id enim. Etiam dictum velit et mi laoreet pharetra. Fusce vehicula, lectus eget laoreet tincidunt, neque odio lacinia elit, in molestie sem nisi fringilla odio. Vivamus feugiat nisi vitae maximus scelerisque. Donec eget ante nec mi porta imperdiet nec non elit.</blockquote>

		<p>Donec euismod ornare sem, id ullamcorper nunc faucibus in. Integer finibus, ex eu efficitur hendrerit, elit libero aliquet nulla, et maximus ipsum nisl vel velit. Nam diam urna, ullamcorper sit amet augue ac, blandit scelerisque est. Cras est purus, pharetra finibus egestas non, tempor in eros. Nunc id mauris fermentum, rhoncus tortor et, tempor ligula. Sed nec ipsum iaculis, efficitur ex vitae, efficitur tortor. Etiam vel dapibus magna.</p>

		<p>viverra at ligula elementum varius. Suspendisse molestie elementum lorem, id sollicitudin nunc feugiat vitae. Quisque vel dolor a velit fermentum imperdiet ac in libero. Donec et arcu auctor, dapibus diam nec, egestas elit. Mauris quis maximus nulla. Fusce commodo est ac lacus semper, ut molestie elit fringilla. Cras tempus gravida ante et rhoncus. Fusce eget venenatis leo.</p>

		<p>Maecenas sit amet ultricies nisl. Vestibulum tincidunt nisl sed vehicula lacinia. Nulla leo risus, maximus non fringilla eget, sagittis vel urna. Donec fermentum blandit pretium. Donec suscipit, ante a fermentum iaculis, dui magna elementum leo, non mattis ex sapien nec turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at lobortis lectus. Vestibulum et ante at neque facilisis ullamcorper. Pellentesque diam felis, accumsan id interdum non, maximus a neque.</p>

		<p><small>Vestibulum odio ante, ultricies id aliquet nec, finibus vel urna.</small> Nulla arcu neque, ornare in rhoncus in, consectetur sed justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sollicitudin magna turpis, sit amet hendrerit lorem ultrices non. Pellentesque luctus luctus nibh, ac commodo diam rhoncus luctus. Suspendisse rhoncus tellus id augue varius ultricies. Aenean auctor congue magna, in mattis felis vulputate et.</p>

		</div>

		</body>

		</html>	
	
	
 

Abra algum editor para escrever / atualizar seu código SaSS (eu utilizo o Dreamweaver ou Sublime Text). Selecione o arquivo 'screen.scss' dentro da pasta 'estilos/sass'

			/*
			  * Variáveis
			*/

			$largura_pagina: 700px;

			body, html {
				padding: 25px;
			}

			div:first-child {

				width: $largura_pagina;
				margin: 0 auto;
				background: #f0f0f0;
				padding: 10px;
				border: 1px solid #ccc;

				font: {
					family: Arial;
					size: 16px;
				}

				h1 {
					background-color: #333;
					color: #fff;
					padding: 8px;
				}

				img {
					width: 100%;
					height: auto;
				}

				legend {
					color: #000;
					padding: 5px;
					font-size: 13px;
					margin: 25px 0;
					display: block;
					width: 100%;
					font-weight: 700;
				}

				code {
					display: block;
					padding: 0;
					margin: 0;

					font: {
						family: "Courier new";
						size: 14px;
					}
				}

				pre {
					background: black;
					font: {
						family: "Courier new";
						size: 14px;
					}
					color: #fff;
					padding: 15px;
					margin: 0;
					white-space: pre-line;
				}

				p {
					line-height: 20px;
					margin: 15px 0;
				}
			}

			#principal {

				width: $largura_pagina;
				background: #696969;
				padding: 10px;
				border: 1px solid #333;
				margin: 50px auto;

				font: {
					family: Arial;
					size: 16px;
				}

				h1 {
					background-color: #333;
					color: #fff;
					padding: 8px;
				}

				h2 {
					background-color: #000;
					color: red;
					padding: 8px;
					margin-bottom: 25px;
				}

				blockquote {
					background: #fff;
					color: red;
					padding: 25px;
					font-size: 15px;
					border-radius: 20px;
				}

				p {
					line-height: 20px;
					margin: 15px 0;
					color: #fff;
				}

				small {
					display: inline-block;
					background: red;
					color: #fff;
					padding: 1px 5px;
				}
			}

		
 

Faça o download dos arquivos aqui e confira, também, um arquivo em HTML para você testar seu código SaSS.

23 de Novembro de 2016 [14:58:28]

CEO da MDM Studio, Marcelo Motta participa ativamente do processo de produção de websites, tendo em seu portfólio mais de 130 trabalhos finalizados, entre marcas, websites e sistemas web. Os projetos mais recentes contam com a estrutura do HTML 5, combinados com CSS3 e versões mobile através de media queries.
 

TechNews

Informativos MDM Studio, Games e Tecnologia

Assine nosso Feed RSS