• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مشکل در استفاده از scss
#1
سلام دوستان
من دارم از sass استفاده می کنم البته تازه اشنا شدم هنوز سررشته دقیقی ندارم
من کد هایی رو کپی کردم و اجرا کردم برنامه netbeans هیچ ایرادی از کد ها نمیگیره اما خوب درست هم کار نمی کنه
فایل sass تبدیل به css میشه اما با این همه حال استایل ها درست اعمال نمیشن
ممنون میشم کد ها را بررسی کنید
index.html
کد پی‌اچ‌پی:
<html>
    <
head>
        
        
       
        <
link href="pieandline/linepiechart.css" type="text/css" rel="stylesheet"/>
        
         
        <
title>TODO supply a title</title>
        <
meta charset="UTF-8">
        <
meta name="viewport" content="width=device-width">
    </
head>
    <
body>

        <
script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
        <
script  src="pieandline/pielinechart.js" type="text/javascript" ></script>
    <
h1 class="charts--headline">Wanna check the code?<br>Click "Edit this pen" in left bottom corner.</h1>
<
div class="charts--container">
  <
ul>
    <
li class="chart">
      <
h3 class="chart--subHeadline">Chart 1</h3>
      <
h2 class="chart--headline">Pie Question Would Go Here</h2>
      <
div id="pieChart">
        <
svg id="pieChartSVG">
          <
defs>
            <
filter id='pieChartInsetShadow'>
              <
feOffset dx='0' dy='0'/>
              <
feGaussianBlur stdDeviation='3' result='offset-blur' />
              <
feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' />
              <
feFlood flood-color='black' flood-opacity='1' result='color' />
              <
feComposite operator='in' in='color' in2='inverse' result='shadow' />
              <
feComposite operator='over' in='shadow' in2='SourceGraphic' />
            </
filter>
            <
filter id="pieChartDropShadow">
              <
feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
              <
feOffset in="blur" dx="0" dy="3" result="offsetBlur" />
              <
feMerge>
                <
feMergeNode />
                <
feMergeNode in="SourceGraphic" />
              </
feMerge>
            </
filter>
          </
defs>
        </
svg>
      </
div>
    </
li>
    <
li class="chart">
      <
h3 class="chart--subHeadline">Chart 2</h3>
      <
h2 class="chart--headline">Area Label Would Go Here</h2>
      <
div id="lineChart">
        <
svg id="lineChartSVG" class="lineChart--svg">
          <
defs>
            <
linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
              <
stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
              <
stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
            </
linearGradient>
          </
defs>
        </
svg>
      </
div>
    </
li>
  </
ul>
</
div>
    </
body>
</
html
linepiechart.scss
کد پی‌اچ‌پی:
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 11, 2014, 8:24:54 PM
    Author     : masoud
*/

/**
 * Variable power
 */

// color stuff
$c-bg             #fff;
$c-baseColor      #333;
$c-baseColorBright#666;

$c-border           #eee;
$c-borderDark       $c-baseColor;
$c-borderBright     adjust-lightness$c-baseColor30 );
$c-borderBrightPlus adjust-lightness$c-baseColor50 );
$c-shadow           $c-baseColor;
$c-dashedLine       adjust-lightness$c-baseColor40 );

$c-borderDevider $c-borderBright;

$c-red  #d79d91;
$c-blue #6bb7c7;

// font-stuff
$f-family sans-serif;

// sizes
$f-baseSize               14px;

$f-sizeHeadline           $f-baseSize;
$f-sizeSubHeadline        $f-baseSize;

$f-sizePieChartPercentage $f-baseSize;
$f-sizePieChartText       $f-baseSize;

$f-sizeBubbleLabel 0.9 $f-baseSize;
$f-sizeBubbleValue 1.5 $f-baseSize;

// weights
$f-weight            100;
$f-weightHeadline    $f-weight;
$f-weightSubHeadline 400;

$f-weightPieChartPercentage 100;

// spacing
$f-spacing 1px;

// dimensions
$d-chartHeight 400px;

// set base styles
* {
  -
moz-box-sizingborder-box;
  
box-sizingborder-box;


body {
  
font-size$f-baseSize;
  
font-family$f-family;
  
font-weight$f-weight;

  
background-color#ccc;
  
background-imagelinear-gradient(transparent 50%, rgba(255,255,255,.525%);
  
background-size4px 4px;
  
  
ul {
    list-
stylenone;
  }
  
  
ulli {
    
margin0;
    
padding0;
  }
}

.
chart {
  
min-height$d-chartHeight;
  
border-bottom1px solid $c-border;

  
padding1em;
}

.
chart--headline, .chart--subHeadline {
  
text-aligncenter;
}

.
chart--headline {
  
positionrelative;
  
  
font-weight$f-weightHeadline;
  
font-size$f-sizeHeadline;

  &:
before {
    
positionabsolute;
    
content'';
    
    
bottom133%;
    
left50%;
    
    
width25%;
    
margin0 0 0 -12.5%;
    
    
border-top1px dashed $c-dashedLine;
  }
}

.
chart--subHeadline {
  
font-weight$f-weightSubHeadline;
  
font-size$f-sizeSubHeadline;
  
letter-spacing$f-spacing;
}

.
charts--container {
  
background-color$c-bg;
  
width100%;
  
  @
media screen and (min-width700px) {
    
max-width700px;
    
    
left 50%;
    
top 10%;
    
margin5em auto
    
    
box-shadow0 2em 2em $c-shadow;
  }
}

.
charts--headline {
  
text-aligncenter;
  
color#444;
  
background-color#fff;
  
padding1em;
}

.
lineChart--area {
  
fillurl(#lineChart--gradientBackgroundArea);
}

.
lineChart--areaLine {
  
fill   none;
  
stroke $c-blue;
  
stroke-width3;
}

.
lineChart--bubble--label {
  
fillnone;
  
stroke$c-blue;
  
  
font-size$f-sizeBubbleLabel;
  
font-styleitalic;
  
font-weight$f-weight;
}

.
lineChart--bubble--value {
  
fill#fff;
  
stroke#fff;
  
  
font-size$f-sizeBubbleValue;
  
font-weight$f-weight;
}
.
lineChart--circle {
  
fill$c-blue;
  
stroke#fff;
  
stroke-width3;
}

.
lineChart--circle__highlighted {
  
fill#fff;
  
strokeadjust-lightness$c-blue, -15 );
}

.
lineChart--gradientBackgroundArea--top {
  
stop-color   $c-blue;
  
stop-opacity 0.1;
}

.
lineChart--gradientBackgroundArea--bottom {
  
stop-color   $c-blue;
  
stop-opacity 0.6;
}

.
lineChart--svg {
  
border1px solid $c-border;
}

// d3.js doesn't let me BEM it. :(
.lineChart--xAxisTicks, .lineChart--xAxis, .lineChart--yAxisTicks {
  .
domain {
    
displaynone;
  }
}

.
lineChart--xAxis {
  .
tick {
    
line {
      
displaynone;
    }
  }
}

.
lineChart--xAxisTicks, .lineChart--yAxisTicks {
  .
tick {
    
line {
      
fillnone;
      
stroke$c-borderBrightPlus;
      
stroke-width1;
      
stroke-dasharray2,2;
    }
  }
}

.
pieChart--center--innerCircle {
  
fill#fff;
}

.
pieChart--center--text {
  
font-size$f-sizePieChartText;
}

.
pieChart--center--outerCircle {
  
fillrgba2552552550.75 );
}

.
pieChart--detail--divider {
  
stroke$c-borderDevider;
  
stroke-width1;
}

.
pieChart--detail--percentage {
  
font-size$f-sizePieChartPercentage;
  
font-weight$f-weightPieChartPercentage;
  
  
fill$c-baseColor;
  
stroke-width1px;
}

.
pieChart--detail--textContainer {
  
background-colortransparent;
  
padding10px 0 0 0;
  
margin0;
  
  
color$c-baseColorBright;
  
font-styleitalic;
}

.
pieChart--detail__left {
  
text-alignleft;
}

.
pieChart--detail__right {
  
text-alignright;
}

.
pieChart__blue {
  
fill$c-blue;
}

.
pieChart__red {
  
fill$c-red;
}

/**
 * Helper classes
 */ 

.hidden {
  
displaynone;

pielinechart.js
کد پی‌اچ‌پی:
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


( function() {
  var 
data = {
    
lineChart : [
      {
        
date  '2006-02-22',
        
label 'foo',
        
value 950
      
},
      {
        
date  '2006-08-22',
        
label 'bar',
        
value 1000
      
},
      {
        
date  '2007-01-11',
        
label 'baz',
        
value 700
      
},
      {
        
date  '2008-10-01',
        
label 'boing',
        
value 534
      
},
      {
        
date  '2009-02-24',
        
label 'loool',
        
value 1423
      
},
      {
        
date  '2010-12-30',
        
label 'YEAH',
        
value 1222
      
},
      {
        
date  '2011-05-15',
        
label 'Hurray',
        
value 948
      
},
      {
        
date  '2012-04-02',
        
label 'WTF',
        
value 1938
      
},
      {
        
date  '2013-08-19',
        
label 'OMG',
        
value 1245
      
},
      {
        
date  '2013-11-11',
        
label 'ROFL',
        
value 888
      
}
    ],
    
pieChart  : [
      {
        
color       'red',
        
description 'Ipsem lorem text goes here. And foo goes bar goes baz. That\'s up!!!',
        
title       'flowers',
        
value       0.62
      
},
      {
        
color       'blue',
        
description 'Another ipsem text goes here. And baz goes bar goes foo. Oh yeah, whazzz up?',
        
title       'trains',
        
value       0.38
      
}
    ]
  };
  
  var 
DURATION 1500;
  var 
DELAY    500;
  
  
/**
   * draw the fancy line chart
   *
   * @param {String} elementId elementId
   * @param {Array}  data      data
   */
  
function drawLineChartelementIddata ) {
    
// parse helper functions on top
    
var parse d3.time.format'%Y-%m-%d' ).parse;
    
// data manipulation first
    
data data.map( function( datum ) {
      
datum.date parsedatum.date );
      
      return 
datum;
    } );
    
    
// TODO code duplication check how you can avoid that
    
var containerEl document.getElementByIdelementId ),
        
width       containerEl.clientWidth,
        
height      width 0.4,
        
margin      = {
          
top    30,
          
right  10,
          
left   10 
        
},
        
        
detailWidth  98,
        
detailHeight 55,
        
detailMargin 10,

        
container   d3.selectcontainerEl ),
        
svg         container.select'svg' )
                                .
attr'width'width )
                                .
attr'height'height margin.top ),

        
x          d3.time.scale().range( [ 0width detailWidth ] ),
        
xAxis      d3.svg.axis().scale)
                                  .
ticks )
                                  .
tickSize( -height ),
        
xAxisTicks d3.svg.axis().scale)
                                  .
ticks16 )
                                  .
tickSize( -height )
                                  .
tickFormat'' ),
        
y          d3.scale.linear().range( [ height] ),
        
yAxisTicks d3.svg.axis().scale)
                                  .
ticks12 )
                                  .
tickSizewidth )
                                  .
tickFormat'' )
                                  .
orient'right' ),
        
        
area d3.svg.area()
                      .
interpolate'linear' )
                      .
x( function( )  { return xd.date ) + detailWidth 2; } )
                      .
y0height )
                      .
y1( function( ) { return yd.value ); } ),

        
line d3.svg.line()
                  .
interpolate'linear' )
                  .
x( function( ) { return xd.date ) + detailWidth 2; } )
                  .
y( function( ) { return yd.value ); } ),
        
        
startData data.map( function( datum ) {
                      return {
                        
date  datum.date,
                        
value 0
                      
};
                    } ),
        
        
circleContainer;

    
// Compute the minimum and maximum date, and the maximum price.
    
x.domain( [ data].datedatadata.length ].date ] );
    
// hacky hacky hacky :(
    
y.domain( [ 0d3.maxdata, function( ) { return d.value; } ) + 700 ] );

    
svg.append'g' )
        .
attr'class''lineChart--xAxisTicks' )
        .
attr'transform''translate(' detailWidth ',' height ')' )
        .
callxAxisTicks );

    
svg.append'g' )
        .
attr'class''lineChart--xAxis' )
        .
attr'transform''translate(' detailWidth ',' + ( height ) + ')' )
        .
callxAxis );
    
    
svg.append'g' )
      .
attr'class''lineChart--yAxisTicks' )
      .
callyAxisTicks );
    
    
// Add the line path.
    
svg.append'path' )
        .
datumstartData )
        .
attr'class''lineChart--areaLine' )
        .
attr'd'line )
        .
transition()
        .
durationDURATION )
        .
delayDURATION )
        .
attrTween'd'tweendataline ) )
        .
each'end', function() {
          
drawCirclesdata );
        } );
    
    
    
// Add the area path.
    
svg.append'path' )
        .
datumstartData )
        .
attr'class''lineChart--area' )
        .
attr'd'area )
        .
transition()
        .
durationDURATION )
        .
attrTween'd'tweendataarea ) );
    
    
// Helper functions!!!
    
function drawCircledatumindex ) {
      
circleContainer.datumdatum )
                    .
append'circle' )
                    .
attr'class''lineChart--circle' )
                    .
attr'r')
                    .
attr(
                      
'cx',
                      function( 
) {
                        return 
xd.date ) + detailWidth 2;
                      }
                    )
                    .
attr(
                      
'cy',
                      function( 
) {
                        return 
yd.value );
                      }
                    )
                    .
on'mouseenter', function( ) {
                      
d3.selectthis )
                        .
attr(
                          
'class',
                          
'lineChart--circle lineChart--circle__highlighted' 
                        
)
                        .
attr'r');
                      
                        
d.active true;
                        
                        
showCircleDetail);
                    } )
                    .
on'mouseout', function( ) {
                      
d3.selectthis )
                        .
attr(
                          
'class',
                          
'lineChart--circle' 
                        
)
                        .
attr'r');
                      
                      if ( 
d.active ) {
                        
hideCircleDetails();
                        
                        
d.active false;
                      }
                    } )
                    .
on'click touch', function( ) {
                      if ( 
d.active ) {
                        
showCircleDetail)
                      } else {
                        
hideCircleDetails();
                      }
                    } )
                    .
transition()
                    .
delayDURATION 10 index )
                    .
attr'r');
    }
    
    function 
drawCirclesdata ) {
      
circleContainer svg.append'g' );

      
data.forEach( function( datumindex ) {
        
drawCircledatumindex );
      } );
    }
    
    function 
hideCircleDetails() {
      
circleContainer.selectAll'.lineChart--bubble' )
                      .
remove();
    }
    
    function 
showCircleDetaildata ) {
      var 
details circleContainer.append'g' )
                        .
attr'class''lineChart--bubble' )
                        .
attr(
                          
'transform',
                          function() {
                            var 
result 'translate(';
                            
                            
result += xdata.date );
                            
result += ', ';
                            
result += ydata.value ) - detailHeight detailMargin;
                            
result += ')';
                            
                            return 
result;
                          }
                        );
      
      
details.append'path' )
              .
attr'd''M2.99990186,0 C1.34310181,0 0,1.34216977 0,2.99898218 L0,47.6680579 C0,49.32435 1.34136094,50.6670401 3.00074875,50.6670401 L44.4095996,50.6670401 C48.9775098,54.3898926 44.4672607,50.6057129 49,54.46875 C53.4190918,50.6962891 49.0050244,54.4362793 53.501875,50.6670401 L94.9943116,50.6670401 C96.6543075,50.6670401 98,49.3248703 98,47.6680579 L98,2.99898218 C98,1.34269006 96.651936,0 95.0000981,0 L2.99990186,0 Z M2.99990186,0' )
              .
attr'width'detailWidth )
              .
attr'height'detailHeight );
      
      var 
text details.append'text' )
                        .
attr'class''lineChart--bubble--text' );
      
      
text.append'tspan' )
          .
attr'class''lineChart--bubble--label' )
          .
attr'x'detailWidth )
          .
attr'y'detailHeight )
          .
attr'text-anchor''middle' )
          .
textdata.label );
      
      
text.append'tspan' )
          .
attr'class''lineChart--bubble--value' )
          .
attr'x'detailWidth )
          .
attr'y'detailHeight )
          .
attr'text-anchor''middle' )
          .
textdata.value );
    }
    
    function 
tweenbcallback ) {
      return function( 
) {
        var 
d3.interpolateArraya);

        return function( 
) {
          return 
callback) );
        };
      };
    }
  }
  
  
/**
   * draw the fancy pie chart
   *
   * @param {String} elementId elementId
   * @param {Array}  data      data
   */
  
function drawPieChartelementIddata ) {
    
// TODO code duplication check how you can avoid that
    
var containerEl document.getElementByIdelementId ),
        
width       containerEl.clientWidth,
        
height      width 0.4,
        
radius      Math.minwidthheight ) / 2,
        
container   d3.selectcontainerEl ),
        
svg         container.select'svg' )
                              .
attr'width'width )
                              .
attr'height'height );
    var 
pie svg.append'g' )
                .
attr(
                  
'transform',
                  
'translate(' width ',' height ')'
                
);
    
    var 
detailedInfo svg.append'g' )
                          .
attr'class''pieChart--detailedInformation' );

    var 
twoPi   Math.PI;
    var 
pieData d3.layout.pie()
                    .
value( function( ) { return d.value; } );

    var 
arc d3.svg.arc()
                    .
outerRadiusradius 20)
                    .
innerRadius);
    
    var 
pieChartPieces pie.datumdata )
                            .
selectAll'path' )
                            .
datapieData )
                            .
enter()
                            .
append'path' )
                            .
attr'class', function( ) {
                              return 
'pieChart__' d.data.color;
                            } )
                            .
attr'filter''url(#pieChartInsetShadow)' )
                            .
attr'd'arc )
                            .
each( function() {
                              
this._current = { startAngle0endAngle}; 
                            } )
                            .
transition()
                            .
durationDURATION )
                            .
attrTween'd', function( ) {
                              var 
interpolate d3.interpolatethis._current);
                              
this._current interpolate);
                    
                              return function( 
) {
                                return 
arcinterpolate) );
                              };
                            } )
                            .
each'end', function handleAnimationEnd) {
                              
drawDetailedInformationd.datathis ); 
                            } );

    
drawChartCenter(); 
    
    function 
drawChartCenter() {
      var 
centerContainer pie.append'g' )
                                .
attr'class''pieChart--center' );
      
      
centerContainer.append'circle' )
                      .
attr'class''pieChart--center--outerCircle' )
                      .
attr'r')
                      .
attr'filter''url(#pieChartDropShadow)' )
                      .
transition()
                      .
durationDURATION )
                      .
delayDELAY )
                      .
attr'r'radius 50 );
      
      
centerContainer.append'circle' )
                      .
attr'id''pieChart-clippy' )
                      .
attr'class''pieChart--center--innerCircle' )
                      .
attr'r')
                      .
transition()
                      .
delayDELAY )
                      .
durationDURATION )
                      .
attr'r'radius 55 )
                      .
attr'fill''#fff' );
    }
    
    function 
drawDetailedInformation dataelement ) {
      var 
bBox      element.getBBox(),
          
infoWidth width 0.3,
          
anchor,
          
infoContainer,
          
position;
      
      if ( ( 
bBox.bBox.width ) > ) {
        
infoContainer detailedInfo.append'g' )
                                    .
attr'width'infoWidth )
                                    .
attr(
                                      
'transform',
                                      
'translate(' + ( width infoWidth ) + ',' + ( bBox.height bBox.) + ')'
                                    
);
        
anchor   'end';
        
position 'right';
      } else {
        
infoContainer detailedInfo.append'g' )
                                    .
attr'width'infoWidth )
                                    .
attr(
                                      
'transform',
                                      
'translate(' ',' + ( bBox.height bBox.) + ')'
                                    
);
        
anchor   'start';
        
position 'left';
      }

      
infoContainer.data( [ data.value 100 ] )
                    .
append'text' )
                    .
text '0 %' )
                    .
attr'class''pieChart--detail--percentage' )
                    .
attr'x', ( position === 'left' infoWidth ) )
                    .
attr'y', -10 )
                    .
attr'text-anchor'anchor )
                    .
transition()
                    .
durationDURATION )
                    .
tween'text', function( ) {
                      var 
d3.interpolateRound(
                        +
this.textContent.replace( /\s%/ig'' ),
                        
d
                      
);

                      return function( 
) {
                        
this.textContent i) + ' %';
                      };
                    } );
      
      
infoContainer.append'line' )
                    .
attr'class''pieChart--detail--divider' )
                    .
attr'x1')
                    .
attr'x2')
                    .
attr'y1')
                    .
attr'y2')
                    .
transition()
                    .
durationDURATION )
                    .
attr'x2'infoWidth );
      
      
infoContainer.data( [ data.description ] ) 
                    .
append'foreignObject' )
                    .
attr'width'infoWidth 
                    .
attr'height'100 )
                    .
append'xhtml:body' )
                    .
attr(
                      
'class',
                      
'pieChart--detail--textContainer ' 'pieChart--detail__' position
                    
)
                    .
htmldata.description );
    }
  }
  
  function 
ಠ_ಠ() {
    
drawPieChart(     'pieChart',     data.pieChart );
    
drawLineChart(    'lineChart',    data.lineChart );
  }
  
  
// yeah, let's kick things off!!!
  
ಠ_ಠ();
  
})(); 
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان