Hello Community,
I thought about using SASS and Compass for my next web application and it came to my mind that someone probably already did this.
So, has someone already created SASS-Templates out of the current default Yii CSS files and is willing and able to share those 
?
Thanks in advance,
Ramon
Hi there,
I found that there is relatively little to do, when converting the css files to scss.
So it’s easily done by hand and a good practice as well 
Thanks.
You can use this extension which adds Sass and Compass support to the Yii framework:
Sass (SCSS) and Compass support for the Yii framework
I know this is an ooold post. In any case, if someone needs this…
$border-color: #C9E0ED;
$background: #EFEFEF;
body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: $background;
}
#page
{
margin-top: 5px;
margin-bottom: 5px;
background: white;
border: 1px solid $border-color;
}
#header
{
margin: 0;
padding: 0;
border-top: 3px solid $border-color;
}
#content
{
padding: 20px;
}
#sidebar
{
padding: 20px 20px 20px 0;
}
#footer
{
padding: 10px;
margin: 10px 20px;
font-size: 0.8em;
text-align: center;
border-top: 1px solid $border-color;
}
#logo
{
padding: 10px 20px;
font-size: 200%;
}
#mainmenu
{
background:white url(bg.gif) repeat-x left top;
ul
{
padding:6px 20px 5px 20px;
margin:0px;
li
{
display: inline;
a {
color:#ffffff;
background-color:transparent;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:5px 8px;
}
& a:hover, &.active a {
color: #6399cd;
background-color:#EFF4FA;
text-decoration:none;
}
}
}
}
div.flash-error, div.flash-notice, div.flash-success
{
padding:.8em;
margin-bottom:1em;
border:2px solid #ddd;
}
div.flash-error
{
background:#FBE3E4;
color:#8a1f11;
border-color:#FBC2C4;
a {
color:#8a1f11;
}
}
div.flash-notice
{
background:#FFF6BF;
color:#514721;
border-color:#FFD324;
a {
color:#514721;
}
}
div.flash-success
{
background:#E6EFC2;
color:#264409;
border-color:#C6D880;
a {
color:#264409;
}
}
div.form .rememberMe label
{
display: inline;
}
div.view
{
padding: 10px;
margin: 10px 0;
border: 1px solid $border-color;
}
div.breadcrumbs
{
font-size: 0.9em;
padding: 5px 20px;
span {
font-weight: bold;
}
}
div.search-form
{
padding: 10px;
margin: 10px 0;
background: #eee;
}
.portlet
{
}
.portlet-decoration
{
padding: 3px 8px;
background: #B7D6E7;
border-left: 5px solid #6FACCF;
}
.portlet-title
{
font-size: 12px;
font-weight: bold;
padding: 0;
margin: 0;
color: #298dcd;
}
.portlet-content
{
font-size:0.9em;
margin: 0 0 15px 0;
padding: 5px 8px;
background:#EFFDFF;
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin: 0;
padding: 0;
}
li {
padding: 2px 0 4px 0px;
}
}
.operations
{
list-style-type: none;
margin: 0;
padding: 0;
li {
padding-bottom: 2px;
a {
font: bold 12px Arial;
color: #0066A4;
display: block;
padding: 2px 0 2px 8px;
line-height: 15px;
text-decoration: none;
:visited{
color: #0066A4;
}
.operations li a:hover {
background: #80CFFF;
}
}
}
}