Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

8 mai 2014 4 08 /05 /mai /2014 16:29
  • Gestionnaire de package NuGet chercher « sassandcoffee »

  • Ou taper directement dans la console install-package SassAndCoffee

 sass1

Ajouter une feuille de style SASS (extension *.scss)

 sass2.png

 

<link rel="stylesheet" type="text/css" href="Css/DemoSass.css" />

 

Lorsque l’on sauvegarde une feuille de style correspondante est automatiquement générée

Variables

Les variables SASS sont déclarées avec $

$nomvariable :valeur

 

Quelques utilisations

sass71.png

 

sass8.png

 sass7.png

 On peut également faire des boucles avec Sass.@extend et les rules sont également intéressants.

Code

DemoSass.scss

@import "SizesSass.scss"; // Import

@import "MixinsSass.scss";

 

//Variables

$base-background:Skyblue;

$base-color:white;

$alternative-color:gray;

$root:"/Images/";

$base-class-name:"maclasse";

 

 

// fonction

@function big-size($size)

{

    @if($size < 50)

    {

        @return ($size + 20px);

    }

    @else

    {

        @return ($size);

    }

}

 

.#{$base-class-name}1

{

    color:$alternative-color;

    font-size:big-size(40px); // utilisation de  la fonction

}

 

body { 

    background-image:url("#{$root}backgr1.png"); // injection de chaine

}

 

p{

     color:lighten($base-color,50%); // une fonction de couleur

     font-size:$base-font-size + 10px; // une opération

}

 

#content{

     background:$base-background;

    @include border-radius-all(10px); //mixin

}

 

// nested rules

a{

    text-decoration:none;

    &:hover{

        text-decoration:underline;

    }

}

 

MixinsSass.scss

@mixin border-radius-all($size) {

  -webkit-border-radius: $size;

     -moz-border-radius: $size;

          border-radius: $size;

}

 

SizesSass.scss

$base-font-size:12px;

 

Et Default.aspx

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LessSassTraining.Default" %> 

 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

     <link rel="stylesheet" type="text/css" href="Css/DemoSass.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="content">

     <p>Hello World ! <a href="#">Sass is cool !!</a></p>

        <p class="maclasse1">Demo injection</p>

    </div>

    </form>

</body>

</html>

 

 

Ressources

http://sass-lang.com/guide

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Chirpy  http://chirpy.codeplex.com/

Partager cet article

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article

commentaires